diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 0f8b577893..11e2c704d3 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -775,6 +775,7 @@ pub struct RampSet {
 #[derive(Clone, Deserialize, Default)]
 pub struct Layer {
     pub base: StyleSet,
+    pub variant: StyleSet,
     pub on: StyleSet,
     pub info: StyleSet,
     pub positive: StyleSet,
@@ -785,7 +786,6 @@ pub struct Layer {
 #[derive(Clone, Deserialize, Default)]
 pub struct StyleSet {
     pub default: Style,
-    pub variant: Style,
     pub active: Style,
     pub disabled: Style,
     pub hovered: Style,
diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index 1a7bfbcd89..ce24dbc34a 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -2,8 +2,8 @@ use gpui::{
     actions,
     color::Color,
     elements::{
-        Canvas, ConstrainedBox, Container, ContainerStyle, ElementBox, Flex, Label, Margin,
-        MouseEventHandler, Padding, ParentElement,
+        Canvas, Container, ContainerStyle, ElementBox, Flex, Label, Margin, MouseEventHandler,
+        Padding, ParentElement,
     },
     fonts::TextStyle,
     Border, Element, Entity, MutableAppContext, Quad, RenderContext, View, ViewContext,
@@ -97,27 +97,32 @@ impl ThemeTestbench {
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(1, layer_index, "on", &layer.on, cx)
+                Self::render_button_set(1, layer_index, "variant", &layer.variant, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(2, layer_index, "info", &layer.info, cx)
+                Self::render_button_set(2, layer_index, "on", &layer.on, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
+                Self::render_button_set(3, layer_index, "info", &layer.info, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
+                Self::render_button_set(4, layer_index, "positive", &layer.positive, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
+                Self::render_button_set(5, layer_index, "warning", &layer.warning, cx)
+                    .flex(1., false)
+                    .boxed(),
+            )
+            .with_child(
+                Self::render_button_set(6, layer_index, "negative", &layer.negative, cx)
                     .flex(1., false)
                     .boxed(),
             )
@@ -153,21 +158,13 @@ impl ThemeTestbench {
             .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,
+                set_index * 4 + 2,
                 layer_index,
                 "disabled",
                 &style_set,
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 590af3f52c..f0c7f51998 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -1,16 +1,45 @@
 import { fontFamilies, fontSizes, FontWeight } from "../common";
-import { Layer, Styles, StyleSets } from "../themes/common/colorScheme";
+import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
 
-export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
-  return layer[styleSet ?? "base"][style ?? "default"].background;
+function isStyleSet(key: any): key is StyleSets {
+  return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
 }
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
-  return layer[styleSet ?? "base"][style ?? "default"].border;
+function isStyle(key: any): key is Styles {
+  return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
 }
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
-  return layer[styleSet ?? "base"][style ?? "default"].foreground;
+function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
+  let styleSet: StyleSets = "base";
+  let style: Styles = "default";
+  if (isStyleSet(possibleStyleSetOrStyle)) {
+    styleSet = possibleStyleSetOrStyle;
+  } else if (isStyle(possibleStyleSetOrStyle)) {
+    style = possibleStyleSetOrStyle;
+  }
+
+  if (isStyle(possibleStyle)) {
+    style = possibleStyle;
+  }
+
+  return layer[styleSet][style];
 }
 
+export function background(layer: Layer, style?: Styles): string;
+export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+  return getStyle(layer, styleSetOrStyles, style).background;
+}
+
+export function borderColor(layer: Layer, style?: Styles): string;
+export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+  return getStyle(layer, styleSetOrStyles, style).border;
+}
+
+export function foreground(layer: Layer, style?: Styles): string;
+export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
+export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+  return getStyle(layer, styleSetOrStyles, style).foreground;
+}
 
 interface Text {
   family: keyof typeof fontFamilies,
@@ -41,33 +70,24 @@ export function text(
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
+  style: Styles,
   properties?: TextProperties): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
-  styleSetOrProperties?: StyleSets | TextProperties,
+  properties?: TextProperties): Text;
+export function text(
+  layer: Layer,
+  fontFamily: keyof typeof fontFamilies,
+  styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
   styleOrProperties?: Styles | TextProperties,
   properties?: TextProperties
 ) {
-  let styleSet: StyleSets = "base";
-  let style: Styles = "default";
-
-  if (typeof styleSetOrProperties === "string") {
-    styleSet = styleSetOrProperties
-  } else if (styleSetOrProperties !== undefined) {
-    properties = styleSetOrProperties;
-  }
-
-  if (typeof styleOrProperties === "string") {
-    style = styleOrProperties;
-  } else if (styleOrProperties !== undefined) {
-    properties = styleOrProperties;
-  }
-
+  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
   let size = fontSizes[properties?.size || "sm"];
   return {
     family: fontFamilies[fontFamily],
-    color: layer[styleSet][style].foreground,
+    color: style.foreground,
     ...properties,
     size,
   };
@@ -84,7 +104,7 @@ export interface Border {
   overlay?: boolean;
 }
 
-export interface BorderOptions {
+export interface BorderProperties {
   width?: number;
   top?: boolean;
   bottom?: boolean;
@@ -97,41 +117,33 @@ export function border(
   layer: Layer,
   styleSet: StyleSets,
   style: Styles,
-  options?: BorderOptions
+  properties?: BorderProperties
 ): Border;
 export function border(
   layer: Layer,
   styleSet: StyleSets,
-  options?: BorderOptions
+  properties?: BorderProperties
 ): Border;
 export function border(
   layer: Layer,
-  options?: BorderOptions
+  style: Styles,
+  properties?: BorderProperties
 ): Border;
 export function border(
   layer: Layer,
-  styleSetOrOptions?: StyleSets | BorderOptions,
-  styleOrOptions?: Styles | BorderOptions,
-  options?: BorderOptions
+  properties?: BorderProperties
+): Border;
+export function border(
+  layer: Layer,
+  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
+  styleOrProperties?: Styles | BorderProperties,
+  properties?: BorderProperties
 ): Border {
-  let styleSet: StyleSets = "base";
-  let style: Styles = "default";
-
-  if (typeof styleSetOrOptions === "string") {
-    styleSet = styleSetOrOptions
-  } else if (styleSetOrOptions !== undefined) {
-    options = styleSetOrOptions;
-  }
-
-  if (typeof styleOrOptions === "string") {
-    style = styleOrOptions;
-  } else if (styleOrOptions !== undefined) {
-    options = styleOrOptions;
-  }
+  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
 
   return {
-    color: layer[styleSet][style].border,
+    color: style.border,
     width: 1,
-    ...options,
+    ...properties,
   };
 }
\ No newline at end of file
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index d86b4306e8..40ba6b3179 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -27,13 +27,13 @@ export default function contactFinder(colorScheme: ColorScheme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     disabledContactButton: {
       ...contactButton,
-      background: background(layer, "base", "disabled"),
-      color: foreground(layer, "base", "disabled"),
+      background: background(layer, "disabled"),
+      color: foreground(layer, "disabled"),
     },
   };
 }
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index a239fd7fc0..dc9224e93b 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -91,8 +91,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         right: sidePadding,
       },
       active: {
-        ...text(layer, "mono", "base", "active", { size: "sm" }),
-        background: background(layer, "base", "active"),
+        ...text(layer, "mono", "active", { size: "sm" }),
+        background: background(layer, "active"),
       },
     },
     contactRow: {
@@ -101,17 +101,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         right: sidePadding,
       },
       active: {
-        background: background(layer, "base", "active"),
+        background: background(layer, "active"),
       },
     },
     treeBranch: {
       color: borderColor(layer),
       width: 1,
       hover: {
-        color: borderColor(layer, "base", "hovered"),
+        color: borderColor(layer, "hovered"),
       },
       active: {
-        color: borderColor(layer, "base", "active"),
+        color: borderColor(layer, "active"),
       },
     },
     contactAvatar: {
@@ -128,7 +128,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     disabledButton: {
@@ -144,10 +144,10 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         ...text(layer, "mono", { size: "sm" }),
       },
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
       active: {
-        background: background(layer, "base", "active"),
+        background: background(layer, "active"),
       },
     },
     inviteRow: {
@@ -158,7 +158,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
       border: border(layer, { top: true }),
       text: text(layer, "sans", { size: "sm" }),
       hover: {
-        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+        text: text(layer, "sans", "hovered", { size: "sm" }),
       },
     },
   };
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 2d38cde80c..97b323885c 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -23,20 +23,20 @@ export default function contextMenu(colorScheme: ColorScheme) {
       cornerRadius: 6,
       label: text(layer, "sans", { size: "sm" }),
       keystroke: {
-        ...text(layer, "sans", "base", "variant", { size: "sm", weight: "bold" }),
+        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
         padding: { left: 3, right: 3 },
       },
       hover: {
-        background: background(layer, "base", "hovered"),
-        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+        background: background(layer, "hovered"),
+        text: text(layer, "sans", "hovered", { size: "sm" }),
       },
       active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active", { size: "sm" }),
+        background: background(layer, "active"),
+        text: text(layer, "sans", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active", { size: "sm" }),
+        background: background(layer, "active"),
+        text: text(layer, "sans", "active", { size: "sm" }),
       },
     },
     separator: {
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 22a4d1bac0..4a3605b52e 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -133,10 +133,10 @@ export default function editor(colorScheme: ColorScheme) {
   return {
     textColor: syntax.primary.color,
     background: background(layer),
-    activeLineBackground: background(layer, "base", "variant"),
-    highlightedLineBackground: background(layer, "base", "variant"),
+    activeLineBackground: background(layer, "variant"),
+    highlightedLineBackground: background(layer, "variant"),
     codeActions: {
-      indicator: foreground(layer, "base", "variant"),
+      indicator: foreground(layer, "variant"),
       verticalScale: 0.618
     },
     diffBackgroundDeleted: background(layer, "negative"),
@@ -147,7 +147,7 @@ export default function editor(colorScheme: ColorScheme) {
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
     lineNumber: foreground(layer),
-    lineNumberActive: foreground(layer, "base", "active"),
+    lineNumberActive: foreground(layer, "active"),
     renameFade: 0.6,
     unnecessaryCodeFade: 0.5,
     selection: colorScheme.players[0],
@@ -169,7 +169,7 @@ export default function editor(colorScheme: ColorScheme) {
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        background: background(elevation.above.top, "base", "hovered"),
+        background: background(elevation.above.top, "hovered"),
       },
       margin: {
         left: -14,
@@ -177,7 +177,7 @@ export default function editor(colorScheme: ColorScheme) {
       matchHighlight: elevation.above.ramps.blue(0.5).hex(),
       selectedItem: {
         ...autocompleteItem,
-        background: background(elevation.above.top, "base", "active"),
+        background: background(elevation.above.top, "active"),
       },
     },
     diagnosticHeader: {
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 49498f4e51..7732fdff5f 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -23,11 +23,11 @@ export default function picker(colorScheme: ColorScheme) {
       text: text(layer, "sans"),
       highlightText: text(layer, "sans", { weight: "bold" }),
       active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active"),
+        background: background(layer, "active"),
+        text: text(layer, "sans", "active"),
       },
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     border: border(layer),
diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts
index 25eac4713f..32127a84c7 100644
--- a/styles/src/styleTree/projectDiagnostics.ts
+++ b/styles/src/styleTree/projectDiagnostics.ts
@@ -8,6 +8,6 @@ export default function projectDiagnostics(colorScheme: ColorScheme) {
     tabIconSpacing: 4,
     tabIconWidth: 13,
     tabSummarySpacing: 10,
-    emptyMessage: text(layer, "sans", "base", "variant", { size: "md" }),
+    emptyMessage: text(layer, "sans", "variant", { size: "md" }),
   };
 }
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 87a12d0d6a..c22be76b63 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -17,12 +17,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
         background: background(layer, "on", "hovered"),
       },
       active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "mono", "base", "active", { size: "sm" }),
+        background: background(layer, "active"),
+        text: text(layer, "mono", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "base", "hovered"),
-        text: text(layer, "mono", "base", "active", { size: "sm" }),
+        background: background(layer, "hovered"),
+        text: text(layer, "mono", "active", { size: "sm" }),
       },
     },
     cutEntryFade: 0.4,
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 953b3351d3..3844c01334 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -10,9 +10,9 @@ export default function search(colorScheme: ColorScheme) {
     cornerRadius: 8,
     minWidth: 200,
     maxWidth: 500,
-    placeholderText: text(layer, "mono", "base", "disabled"),
+    placeholderText: text(layer, "mono", "disabled"),
     selection: colorScheme.players[0],
-    text: text(layer, "mono", "base", "active"),
+    text: text(layer, "mono", "active"),
     border: border(layer),
     margin: {
       right: 12,
@@ -65,7 +65,7 @@ export default function search(colorScheme: ColorScheme) {
       border: border(layer, "negative"),
     },
     matchIndex: {
-      ...text(layer, "mono", "on", "variant"),
+      ...text(layer, "mono", "variant"),
       padding: 6,
     },
     optionButtonGroup: {
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 1a0876ecf4..4f4aa09b42 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -42,7 +42,7 @@ export default function statusBar(colorScheme: ColorScheme) {
     },
     diagnosticMessage: {
       ...text(layer, "sans"),
-      hover: text(layer, "sans", "base", "hovered"),
+      hover: text(layer, "sans", "hovered"),
     },
     feedback: {
       ...text(layer, "sans"),
@@ -98,12 +98,12 @@ export default function statusBar(colorScheme: ColorScheme) {
         iconSize: 16,
         iconColor: foreground(layer),
         hover: {
-          iconColor: foreground(layer, "base", "hovered"),
-          background: background(layer, "base", "hovered"),
+          iconColor: foreground(layer, "hovered"),
+          background: background(layer, "hovered"),
         },
         active: {
-          iconColor: foreground(layer, "base", "active"),
-          background: background(layer, "base", "active"),
+          iconColor: foreground(layer, "active"),
+          background: background(layer, "active"),
         },
       },
       badge: {
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index cbb17045da..24593f6079 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -17,19 +17,19 @@ export default function tabBar(colorScheme: ColorScheme) {
       overlay: true,
     }),
     iconClose: foreground(layer),
-    iconCloseActive: foreground(layer, "base", "active"),
+    iconCloseActive: foreground(layer, "active"),
     iconConflict: foreground(layer, "warning"),
     iconDirty: foreground(layer, "info"),
     iconWidth: 8,
     spacing: 8,
-    text: text(layer, "sans", "base", "variant", { size: "sm" }),
+    text: text(layer, "sans", "variant", { size: "sm" }),
     padding: {
       left: 8,
       right: 8,
     },
     description: {
       margin: { left: 6, top: 1 },
-      ...text(layer, "sans", "base", "variant", { size: "2xs" })
+      ...text(layer, "sans", "variant", { size: "2xs" })
     }
   };
 
@@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
   const inactivePaneInactiveTab = {
     ...tab,
     background: background(layer),
-    text: text(layer, "sans", "base", "variant", { size: "sm" }),
+    text: text(layer, "sans", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
     background: background(elevation.top),
-    text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
+    text: text(elevation.top, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -84,7 +84,7 @@ export default function tabBar(colorScheme: ColorScheme) {
       iconWidth: 12,
       buttonWidth: activePaneActiveTab.height,
       hover: {
-        color: foreground(layer, "base", "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
     paneButtonContainer: {
diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts
index 6536b441bd..d0922a4756 100644
--- a/styles/src/styleTree/updateNotification.ts
+++ b/styles/src/styleTree/updateNotification.ts
@@ -14,7 +14,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
       ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, top: 6, bottom: 6 },
       hover: {
-        color: foreground(layer, "base", "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
     dismissButton: {
@@ -24,7 +24,7 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
       buttonWidth: 8,
       buttonHeight: 8,
       hover: {
-        color: foreground(layer, "base", "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
   };
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 56350458df..34108981e1 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -72,8 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       border: border(layer, { bottom: true, overlay: true }),
       signInPrompt: {
-        background: background(layer, "on", "default"),
-        border: border(layer, "on", "default"),
+        background: background(layer, "on"),
+        border: border(layer, "on"),
         cornerRadius: 6,
         margin: {
           top: 1,
@@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
     toolbar: {
       height: 34,
       background: background(elevation.top),
-      border: border(elevation.top, "base", "variant", { bottom: true }),
+      border: border(elevation.top, "variant", { bottom: true }),
       itemSpacing: 8,
       navButton: {
         color: foreground(elevation.top, "on"),
@@ -136,7 +136,7 @@ export default function workspace(colorScheme: ColorScheme) {
       padding: { left: 8, right: 8, top: 4, bottom: 4 },
     },
     breadcrumbs: {
-      ...text(layer, "mono", "on", "variant"),
+      ...text(layer, "mono", "variant"),
       padding: { left: 6 },
     },
     disconnectedOverlay: {
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index ce74b72fea..94a7fa40c4 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -47,6 +47,7 @@ export interface Shadow {
 export type StyleSets = keyof Layer;
 export interface Layer {
   base: StyleSet,
+  variant: StyleSet,
   on: StyleSet,
   info: StyleSet,
   positive: StyleSet,
@@ -69,7 +70,6 @@ export interface RampSet {
 export type Styles = keyof StyleSet;
 export interface StyleSet {
   default: Style,
-  variant: Style,
   active: Style,
   disabled: Style,
   hovered: Style,
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index c4cfd5d0b2..595bc3a07e 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -2,617 +2,566 @@ import chroma, { Color, Scale } from "chroma-js";
 import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
-    let hue = color.hsl()[0];
-    let endColor = chroma.hsl(hue, 0.88, 0.96);
-    let startColor = chroma.hsl(hue, 0.68, 0.12);
-    return chroma.scale([startColor, color, endColor]).mode("hsl");
+  let hue = color.hsl()[0];
+  let endColor = chroma.hsl(hue, 0.88, 0.96);
+  let startColor = chroma.hsl(hue, 0.68, 0.12);
+  return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
 export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
-    // Chromajs scales from 0 to 1 flipped if isLight is true
-    let baseRamps: typeof colorRamps = {};
+  // Chromajs scales from 0 to 1 flipped if isLight is true
+  let baseRamps: typeof colorRamps = {};
 
-    // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-    // we now store the ramps object in the theme so that we can pull colors out of them.
-    // So instead of calling domain and storing the result, we have to construct new ramps for each
-    // theme so that we don't modify the passed in ramps.
-    // This combined with an error in the type definitions for chroma js means we have to cast the colors
-    // function to any in order to get the colors back out from the original ramps.
-    if (isLight) {
-        for (var rampName in colorRamps) {
-            baseRamps[rampName] = chroma
-                .scale((colorRamps[rampName].colors as any)())
-                .domain([1, 0]);
-        }
-        baseRamps.neutral = chroma
-            .scale((colorRamps.neutral.colors as any)())
-            .domain([1, 0]);
-    } else {
-        for (var rampName in colorRamps) {
-            baseRamps[rampName] = chroma
-                .scale((colorRamps[rampName].colors as any)())
-                .domain([0, 1]);
-        }
-        baseRamps.neutral = chroma
-            .scale((colorRamps.neutral.colors as any)())
-            .domain([0, 1]);
+  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+  // we now store the ramps object in the theme so that we can pull colors out of them.
+  // So instead of calling domain and storing the result, we have to construct new ramps for each
+  // theme so that we don't modify the passed in ramps.
+  // This combined with an error in the type definitions for chroma js means we have to cast the colors
+  // function to any in order to get the colors back out from the original ramps.
+  if (isLight) {
+    for (var rampName in colorRamps) {
+      baseRamps[rampName] = chroma
+        .scale((colorRamps[rampName].colors as any)())
+        .domain([1, 0]);
     }
-
-    let baseSet = {
-        neutral: baseRamps.neutral,
-        red: baseRamps.red,
-        orange: baseRamps.orange,
-        yellow: baseRamps.yellow,
-        green: baseRamps.green,
-        cyan: baseRamps.cyan,
-        blue: baseRamps.blue,
-        violet: baseRamps.violet,
-        magenta: baseRamps.magenta,
-    };
-
-    let lowest = elevation(
-        resampleSet(
-            baseSet,
-            evenSamples(0, 1)
-        ),
-        isLight,
-    );
-
-    let middle = elevation(
-        resampleSet(
-            baseSet,
-            evenSamples(0.125, 1)
-        ),
-        isLight,
-        {
-            blur: 4,
-            color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-            offset: [1, 2],
-        }
-    );
-    lowest.above = middle;
-
-    let highest = elevation(
-        resampleSet(
-            baseSet,
-            evenSamples(0.25, 1)
-        ),
-        isLight,
-        {
-            blur: 16,
-            color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-            offset: [0, 2],
-        }
-    );
-    middle.above = highest;
-
-    let players = {
-        "0": player(baseSet.blue),
-        "1": player(baseSet.green),
-        "2": player(baseSet.magenta),
-        "3": player(baseSet.orange),
-        "4": player(baseSet.violet),
-        "5": player(baseSet.cyan),
-        "6": player(baseSet.red),
-        "7": player(baseSet.yellow),
+    baseRamps.neutral = chroma
+      .scale((colorRamps.neutral.colors as any)())
+      .domain([1, 0]);
+  } else {
+    for (var rampName in colorRamps) {
+      baseRamps[rampName] = chroma
+        .scale((colorRamps[rampName].colors as any)())
+        .domain([0, 1]);
     }
+    baseRamps.neutral = chroma
+      .scale((colorRamps.neutral.colors as any)())
+      .domain([0, 1]);
+  }
 
-    return {
-        name,
-        isLight,
+  let baseSet = {
+    neutral: baseRamps.neutral,
+    red: baseRamps.red,
+    orange: baseRamps.orange,
+    yellow: baseRamps.yellow,
+    green: baseRamps.green,
+    cyan: baseRamps.cyan,
+    blue: baseRamps.blue,
+    violet: baseRamps.violet,
+    magenta: baseRamps.magenta,
+  };
 
-        lowest,
-        middle,
-        highest,
+  let lowest = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0, 1)
+    ),
+    isLight,
+  );
 
-        players,
-    };
+  let middle = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0.125, 1)
+    ),
+    isLight,
+    {
+      blur: 4,
+      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+      offset: [1, 2],
+    }
+  );
+  lowest.above = middle;
+
+  let highest = elevation(
+    resampleSet(
+      baseSet,
+      evenSamples(0.25, 1)
+    ),
+    isLight,
+    {
+      blur: 16,
+      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
+      offset: [0, 2],
+    }
+  );
+  middle.above = highest;
+
+  let players = {
+    "0": player(baseSet.blue),
+    "1": player(baseSet.green),
+    "2": player(baseSet.magenta),
+    "3": player(baseSet.orange),
+    "4": player(baseSet.violet),
+    "5": player(baseSet.cyan),
+    "6": player(baseSet.red),
+    "7": player(baseSet.yellow),
+  }
+
+  return {
+    name,
+    isLight,
+
+    lowest,
+    middle,
+    highest,
+
+    players,
+  };
 }
 
 function player(ramp: Scale): Player {
-    return {
-        selection: ramp(0.5).alpha(0.24).hex(),
-        cursor: ramp(0.5).hex(),
-    }
+  return {
+    selection: ramp(0.5).alpha(0.24).hex(),
+    cursor: ramp(0.5).hex(),
+  }
 }
 
 function evenSamples(min: number, max: number): number[] {
-    return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+  return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
 }
 
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
-    return {
-        neutral: 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),
-    }
+  return {
+    neutral: 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),
+  }
 }
 
 function resample(scale: Scale, samples: number[]): Scale {
-    let newColors = samples.map((sample) => scale(sample));
-    return chroma.scale(newColors);
+  let newColors = samples.map((sample) => scale(sample));
+  return chroma.scale(newColors);
 }
 
 function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
-    return {
-        ramps,
+  return {
+    ramps,
 
-        bottom: bottomLayer(ramps, isLight),
-        middle: middleLayer(ramps, isLight),
-        top: topLayer(ramps, isLight),
+    bottom: bottomLayer(ramps, isLight),
+    middle: middleLayer(ramps, isLight),
+    top: topLayer(ramps, isLight),
 
-        shadow,
-    };
+    shadow,
+  };
 }
 
 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(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).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(),
-        },
-    }
+  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(),
+    },
+  }
 
-    let onSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.15).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).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(),
-        },
-    }
+  let onSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.15).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).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(),
+    },
+  }
 
-    let defaultStyle: Style = {
-        background: ramps.neutral(0.2).hex(),
-        border: ramps.neutral(0.25).hex(),
-        foreground: ramps.neutral(1).hex(),
-    };
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.25).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 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(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.1).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 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 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 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,
-    };
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
 
-    return {
-        base: baseSet,
-        on: onSet,
-        info: styleSet,
-        positive: styleSet,
-        warning: styleSet,
-        negative: styleSet
-    };
+  return {
+    base: baseSet,
+    variant: styleSet,
+    on: onSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
 }
 
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-    let defaultStyle: Style = {
-        background: ramps.neutral(0.2).hex(),
-        border: ramps.neutral(0.4).hex(),
-        foreground: ramps.neutral(1).hex(),
-    };
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.4).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 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 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 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 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 disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
 
-    let baseSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).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(),
-        },
-    }
+  let baseSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.1).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).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(),
+    },
+  }
 
-    let styleSet: StyleSet = {
-        default: defaultStyle,
-        variant: variantStyle,
-        hovered: hoveredStyle,
-        pressed: pressedStyle,
-        active: activeStyle,
-        disabled: disabledStyle,
-    };
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
 
-    return {
-        base: baseSet,
-        on: styleSet,
-        info: styleSet,
-        positive: styleSet,
-        warning: styleSet,
-        negative: styleSet
-    };
+  return {
+    base: baseSet,
+    variant: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
 }
 
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
 
-    let baseSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0).hex(),
-            border: ramps.neutral(0.2).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.1).hex(),
-            border: ramps.neutral(0.15).hex(),
-            foreground: ramps.neutral(0.7).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).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(),
-        },
-    }
+  let baseSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0).hex(),
+      border: ramps.neutral(0.2).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).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(),
+    },
+  }
 
-    let onSet: StyleSet = {
-        default: {
-            background: ramps.neutral(0.3).hex(),
-            border: ramps.neutral(0.5).hex(),
-            foreground: ramps.neutral(1).hex(),
-        },
-        variant: {
-            background: ramps.neutral(0.2).hex(),
-            border: ramps.neutral(0.6).hex(),
-            foreground: ramps.neutral(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.neutral(0.4).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(),
-        },
-    }
+  let onSet: StyleSet = {
+    default: {
+      background: ramps.neutral(0.3).hex(),
+      border: ramps.neutral(0.5).hex(),
+      foreground: ramps.neutral(1).hex(),
+    },
+    hovered: {
+      background: ramps.neutral(0.4).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(),
+    },
+  }
 
-    let infoSet: StyleSet = {
-        default: {
-            background: ramps.blue(0.3).hex(),
-            border: ramps.blue(0.5).hex(),
-            foreground: ramps.blue(1).hex(),
-        },
-        variant: {
-            background: ramps.blue(0.2).hex(),
-            border: ramps.blue(0.6).hex(),
-            foreground: ramps.blue(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.blue(0.4).hex(),
-            border: ramps.blue(1.0).hex(),
-            foreground: ramps.blue(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.blue(0.55).hex(),
-            border: ramps.blue(0.9).hex(),
-            foreground: ramps.blue(0.9).hex(),
-        },
-        active: {
-            background: ramps.blue(0.8).hex(),
-            border: ramps.blue(0.8).hex(),
-            foreground: ramps.blue(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.blue(0.25).hex(),
-            border: ramps.blue(1).hex(),
-            foreground: ramps.blue(0.9).hex(),
-        },
-    }
+  let infoSet: StyleSet = {
+    default: {
+      background: ramps.blue(0.3).hex(),
+      border: ramps.blue(0.5).hex(),
+      foreground: ramps.blue(1).hex(),
+    },
+    hovered: {
+      background: ramps.blue(0.4).hex(),
+      border: ramps.blue(1.0).hex(),
+      foreground: ramps.blue(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.blue(0.55).hex(),
+      border: ramps.blue(0.9).hex(),
+      foreground: ramps.blue(0.9).hex(),
+    },
+    active: {
+      background: ramps.blue(0.8).hex(),
+      border: ramps.blue(0.8).hex(),
+      foreground: ramps.blue(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.blue(0.25).hex(),
+      border: ramps.blue(1).hex(),
+      foreground: ramps.blue(0.9).hex(),
+    },
+  }
 
-    let positiveSet: StyleSet = {
-        default: {
-            background: ramps.green(0.3).hex(),
-            border: ramps.green(0.5).hex(),
-            foreground: ramps.green(1).hex(),
-        },
-        variant: {
-            background: ramps.green(0.2).hex(),
-            border: ramps.green(0.6).hex(),
-            foreground: ramps.green(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.green(0.4).hex(),
-            border: ramps.green(1.0).hex(),
-            foreground: ramps.green(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.green(0.55).hex(),
-            border: ramps.green(0.9).hex(),
-            foreground: ramps.green(0.9).hex(),
-        },
-        active: {
-            background: ramps.green(0.8).hex(),
-            border: ramps.green(0.8).hex(),
-            foreground: ramps.green(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.green(0.25).hex(),
-            border: ramps.green(1).hex(),
-            foreground: ramps.green(0.9).hex(),
-        },
-    }
+  let positiveSet: StyleSet = {
+    default: {
+      background: ramps.green(0.3).hex(),
+      border: ramps.green(0.5).hex(),
+      foreground: ramps.green(1).hex(),
+    },
+    hovered: {
+      background: ramps.green(0.4).hex(),
+      border: ramps.green(1.0).hex(),
+      foreground: ramps.green(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.green(0.55).hex(),
+      border: ramps.green(0.9).hex(),
+      foreground: ramps.green(0.9).hex(),
+    },
+    active: {
+      background: ramps.green(0.8).hex(),
+      border: ramps.green(0.8).hex(),
+      foreground: ramps.green(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.green(0.25).hex(),
+      border: ramps.green(1).hex(),
+      foreground: ramps.green(0.9).hex(),
+    },
+  }
 
-    let warningSet: StyleSet = {
-        default: {
-            background: ramps.yellow(0.3).hex(),
-            border: ramps.yellow(0.5).hex(),
-            foreground: ramps.yellow(1).hex(),
-        },
-        variant: {
-            background: ramps.yellow(0.2).hex(),
-            border: ramps.yellow(0.6).hex(),
-            foreground: ramps.yellow(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.yellow(0.4).hex(),
-            border: ramps.yellow(1.0).hex(),
-            foreground: ramps.yellow(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.yellow(0.55).hex(),
-            border: ramps.yellow(0.9).hex(),
-            foreground: ramps.yellow(0.9).hex(),
-        },
-        active: {
-            background: ramps.yellow(0.8).hex(),
-            border: ramps.yellow(0.8).hex(),
-            foreground: ramps.yellow(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.yellow(0.25).hex(),
-            border: ramps.yellow(1).hex(),
-            foreground: ramps.yellow(0.9).hex(),
-        },
-    }
+  let warningSet: StyleSet = {
+    default: {
+      background: ramps.yellow(0.3).hex(),
+      border: ramps.yellow(0.5).hex(),
+      foreground: ramps.yellow(1).hex(),
+    },
+    hovered: {
+      background: ramps.yellow(0.4).hex(),
+      border: ramps.yellow(1.0).hex(),
+      foreground: ramps.yellow(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.yellow(0.55).hex(),
+      border: ramps.yellow(0.9).hex(),
+      foreground: ramps.yellow(0.9).hex(),
+    },
+    active: {
+      background: ramps.yellow(0.8).hex(),
+      border: ramps.yellow(0.8).hex(),
+      foreground: ramps.yellow(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.yellow(0.25).hex(),
+      border: ramps.yellow(1).hex(),
+      foreground: ramps.yellow(0.9).hex(),
+    },
+  }
 
-    let negativeSet: StyleSet = {
-        default: {
-            background: ramps.red(0.3).hex(),
-            border: ramps.red(0.5).hex(),
-            foreground: ramps.red(1).hex(),
-        },
-        variant: {
-            background: ramps.red(0.2).hex(),
-            border: ramps.red(0.6).hex(),
-            foreground: ramps.red(0.8).hex(),
-        },
-        hovered: {
-            background: ramps.red(0.4).hex(),
-            border: ramps.red(1.0).hex(),
-            foreground: ramps.red(0.9).hex(),
-        },
-        pressed: {
-            background: ramps.red(0.55).hex(),
-            border: ramps.red(0.9).hex(),
-            foreground: ramps.red(0.9).hex(),
-        },
-        active: {
-            background: ramps.red(0.8).hex(),
-            border: ramps.red(0.8).hex(),
-            foreground: ramps.red(0.1).hex(),
-        },
-        disabled: {
-            background: ramps.red(0.25).hex(),
-            border: ramps.red(1).hex(),
-            foreground: ramps.red(0.9).hex(),
-        },
-    }
+  let negativeSet: StyleSet = {
+    default: {
+      background: ramps.red(0.3).hex(),
+      border: ramps.red(0.5).hex(),
+      foreground: ramps.red(1).hex(),
+    },
+    hovered: {
+      background: ramps.red(0.4).hex(),
+      border: ramps.red(1.0).hex(),
+      foreground: ramps.red(0.9).hex(),
+    },
+    pressed: {
+      background: ramps.red(0.55).hex(),
+      border: ramps.red(0.9).hex(),
+      foreground: ramps.red(0.9).hex(),
+    },
+    active: {
+      background: ramps.red(0.8).hex(),
+      border: ramps.red(0.8).hex(),
+      foreground: ramps.red(0.1).hex(),
+    },
+    disabled: {
+      background: ramps.red(0.25).hex(),
+      border: ramps.red(1).hex(),
+      foreground: ramps.red(0.9).hex(),
+    },
+  }
 
-    let defaultStyle: Style = {
-        background: ramps.neutral(0).hex(),
-        border: ramps.neutral(0.7).hex(),
-        foreground: ramps.neutral(1).hex(),
-    };
+  let defaultStyle: Style = {
+    background: ramps.neutral(0).hex(),
+    border: ramps.neutral(0.7).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
 
-    let variantStyle: Style = {
-        background: ramps.neutral(0.2).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 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 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 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 disabledStyle: Style = {
-        background: ramps.neutral(0.25).hex(),
-        border: ramps.neutral(1).hex(),
-        foreground: ramps.neutral(0.9).hex(),
-    };
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
 
-    let styleSet: StyleSet = {
-        default: defaultStyle,
-        variant: variantStyle,
-        hovered: hoveredStyle,
-        pressed: pressedStyle,
-        active: activeStyle,
-        disabled: disabledStyle,
-    };
-
-    return {
-        base: baseSet,
-        on: onSet,
-        info: infoSet,
-        positive: positiveSet,
-        warning: warningSet,
-        negative: negativeSet
-    };
+  return {
+    base: baseSet,
+    variant: styleSet,
+    on: onSet,
+    info: infoSet,
+    positive: positiveSet,
+    warning: warningSet,
+    negative: negativeSet
+  };
 }
\ No newline at end of file