promote variant to its own styleset

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,

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,
+        Canvas, Container, ContainerStyle, ElementBox, Flex, Label, Margin, MouseEventHandler,
-        MouseEventHandler, Padding, ParentElement,
+        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,

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 {
+function isStyleSet(key: any): key is StyleSets {
-  return layer[styleSet ?? "base"][style ?? "default"].background;
+  return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
 }
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
+function isStyle(key: any): key is Styles {
-  return layer[styleSet ?? "base"][style ?? "default"].border;
+  return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
 }
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string {
+function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
-  return layer[styleSet ?? "base"][style ?? "default"].foreground;
+  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 = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
-  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 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,
+  properties?: BorderProperties
-  styleOrOptions?: Styles | BorderOptions,
+): Border;
-  options?: BorderOptions
+export function border(
+  layer: Layer,
+  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
+  styleOrProperties?: Styles | BorderProperties,
+  properties?: BorderProperties
 ): Border {
-  let styleSet: StyleSets = "base";
+  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
-  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;
-  }
 
   return {
-    color: layer[styleSet][style].border,
+    color: style.border,
     width: 1,
-    ...options,
+    ...properties,
   };
 }

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"),
+      background: background(layer, "disabled"),
-      color: foreground(layer, "base", "disabled"),
+      color: foreground(layer, "disabled"),
     },
   };
 }

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" }),
+        ...text(layer, "mono", "active", { size: "sm" }),
-        background: background(layer, "base", "active"),
+        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" }),
       },
     },
   };

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"),
+        background: background(layer, "hovered"),
-        text: text(layer, "sans", "base", "hovered", { size: "sm" }),
+        text: text(layer, "sans", "hovered", { size: "sm" }),
       },
       active: {
-        background: background(layer, "base", "active"),
+        background: background(layer, "active"),
-        text: text(layer, "sans", "base", "active", { size: "sm" }),
+        text: text(layer, "sans", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "base", "active"),
+        background: background(layer, "active"),
-        text: text(layer, "sans", "base", "active", { size: "sm" }),
+        text: text(layer, "sans", "active", { size: "sm" }),
       },
     },
     separator: {

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"),
+    activeLineBackground: background(layer, "variant"),
-    highlightedLineBackground: background(layer, "base", "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: {

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"),
+        background: background(layer, "active"),
-        text: text(layer, "sans", "base", "active"),
+        text: text(layer, "sans", "active"),
       },
       hover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
       },
     },
     border: border(layer),

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" }),
   };
 }

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"),
+        background: background(layer, "active"),
-        text: text(layer, "mono", "base", "active", { size: "sm" }),
+        text: text(layer, "mono", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "base", "hovered"),
+        background: background(layer, "hovered"),
-        text: text(layer, "mono", "base", "active", { size: "sm" }),
+        text: text(layer, "mono", "active", { size: "sm" }),
       },
     },
     cutEntryFade: 0.4,

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: {

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"),
+          iconColor: foreground(layer, "hovered"),
-          background: background(layer, "base", "hovered"),
+          background: background(layer, "hovered"),
         },
         active: {
-          iconColor: foreground(layer, "base", "active"),
+          iconColor: foreground(layer, "active"),
-          background: background(layer, "base", "active"),
+          background: background(layer, "active"),
         },
       },
       badge: {

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: {

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"),
       },
     },
   };

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"),
+        background: background(layer, "on"),
-        border: border(layer, "on", "default"),
+        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: {

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,

styles/src/themes/common/ramps.ts

@@ -158,11 +158,6 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -191,11 +186,6 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -256,7 +246,6 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
 
   let styleSet: StyleSet = {
     default: defaultStyle,
-        variant: variantStyle,
     hovered: hoveredStyle,
     pressed: pressedStyle,
     active: activeStyle,
@@ -265,6 +254,7 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
 
   return {
     base: baseSet,
+    variant: styleSet,
     on: onSet,
     info: styleSet,
     positive: styleSet,
@@ -316,11 +306,6 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -345,7 +330,6 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
 
   let styleSet: StyleSet = {
     default: defaultStyle,
-        variant: variantStyle,
     hovered: hoveredStyle,
     pressed: pressedStyle,
     active: activeStyle,
@@ -354,6 +338,7 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
 
   return {
     base: baseSet,
+    variant: styleSet,
     on: styleSet,
     info: styleSet,
     positive: styleSet,
@@ -370,11 +355,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -403,11 +383,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -436,11 +411,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -469,11 +439,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -502,11 +467,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -535,11 +495,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       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(),
@@ -568,12 +523,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
     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(),
@@ -600,7 +549,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
 
   let styleSet: StyleSet = {
     default: defaultStyle,
-        variant: variantStyle,
     hovered: hoveredStyle,
     pressed: pressedStyle,
     active: activeStyle,
@@ -609,6 +557,7 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
 
   return {
     base: baseSet,
+    variant: styleSet,
     on: onSet,
     info: infoSet,
     positive: positiveSet,