Adjust some of the styles to the new Toggleable format

2023-06-15 16:24:05 +02:00 · 2023-06-15 16:24:05 +02:00 · 31c1177737
commit 31c1177737
parent 198a446b03
15 changed files with 1932 additions and 1808 deletions
--- a/crates/collab_ui/src/collab_titlebar_item.rs
+++ b/crates/collab_ui/src/collab_titlebar_item.rs
@ -491,7 +491,7 @@ impl CollabTitlebarItem {
                .with_child(
                    MouseEventHandler::<ShareUnshare, Self>::new(0, cx, |state, _| {
                        //TODO: Ensure this button has consistent width for both text variations
-                        let style = titlebar.share_button.style_for(state);
+                        let style = titlebar.share_button.inactive_state().style_for(state);
                        Label::new(label, style.text.clone())
                            .contained()
                            .with_style(style.container)
@ -567,7 +567,7 @@ impl CollabTitlebarItem {
    fn render_sign_in_button(&self, theme: &Theme, cx: &mut ViewContext<Self>) -> AnyElement<Self> {
        let titlebar = &theme.workspace.titlebar;
        MouseEventHandler::<SignIn, Self>::new(0, cx, |state, _| {
-            let style = titlebar.sign_in_prompt.style_for(state);
+            let style = titlebar.sign_in_prompt.inactive_state().style_for(state);
            Label::new("Sign In", style.text.clone())
                .contained()
                .with_style(style.container)
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@ -128,12 +128,12 @@ pub struct Titlebar {
    pub leader_avatar: AvatarStyle,
    pub follower_avatar: AvatarStyle,
    pub inactive_avatar_grayscale: bool,
-    pub sign_in_prompt: Interactive<ContainedText>,
+    pub sign_in_prompt: Toggleable<Interactive<ContainedText>>,
    pub outdated_warning: ContainedText,
-    pub share_button: Interactive<ContainedText>,
+    pub share_button: Toggleable<Interactive<ContainedText>>,
    pub call_control: Interactive<IconButton>,
    pub toggle_contacts_button: Toggleable<Interactive<IconButton>>,
-    pub user_menu_button: Interactive<IconButton>,
+    pub user_menu_button: Toggleable<Interactive<IconButton>>,
    pub toggle_contacts_badge: ContainerStyle,
 }

@ -339,7 +339,7 @@ pub struct Toolbar {
    pub container: ContainerStyle,
    pub height: f32,
    pub item_spacing: f32,
-    pub nav_button: Toggleable<Interactive<IconButton>>,
+    pub nav_button: Interactive<IconButton>,
 }

 #[derive(Clone, Deserialize, Default)]
--- a/crates/workspace/src/toolbar.rs
+++ b/crates/workspace/src/toolbar.rs
@ -219,7 +219,7 @@ impl View for Toolbar {
 #[allow(clippy::too_many_arguments)]
 fn nav_button<A: Action, F: 'static + Fn(&mut Toolbar, &mut ViewContext<Toolbar>)>(
    svg_path: &'static str,
-    style: theme::Toggleable<theme::Interactive<theme::IconButton>>,
+    style: theme::Interactive<theme::IconButton>,
    nav_button_height: f32,
    tooltip_style: TooltipStyle,
    enabled: bool,
@ -231,9 +231,9 @@ fn nav_button<A: Action, F: 'static + Fn(&mut Toolbar, &mut ViewContext<Toolbar>
 ) -> AnyElement<Toolbar> {
    MouseEventHandler::<A, _>::new(0, cx, |state, _| {
        let style = if enabled {
-            style.inactive_state().style_for(state)
+            style.style_for(state)
        } else {
-            style.inactive_state().disabled_style()
+            style.disabled_style()
        };
        Svg::new(svg_path)
            .with_color(style.color)
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@ -85,7 +85,7 @@ export function foreground(
  return getStyle(layer, styleSetOrStyles, style).foreground
 }

-interface Text {
+interface Text extends Object {
  family: keyof typeof fontFamilies
  color: string
  size: number
--- a/styles/src/styleTree/contactList.ts
+++ b/styles/src/styleTree/contactList.ts
@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
-
+import { toggleable } from "./toggle"
+import { interactive } from "./interactive"
 export default function contactsPanel(colorScheme: ColorScheme) {
  const nameMargin = 8
  const sidePadding = 12
@ -71,19 +72,22 @@ export default function contactsPanel(colorScheme: ColorScheme) {
    },
    rowHeight: 28,
    sectionIconSize: 8,
-        headerRow: {
+    headerRow: toggleable(interactive({
      ...text(layer, "mono", { size: "sm" }),
      margin: { top: 14 },
      padding: {
        left: sidePadding,
        right: sidePadding,
      },
-            active: {
+      background: background(layer, "default"),// posiewic: breaking change
+    }, {}),
+      {
+        default: {
          ...text(layer, "mono", "active", { size: "sm" }),
          background: background(layer, "active"),
        },
-        },
-        leaveCall: {
+      }),
+    leaveCall: interactive({
      background: background(layer),
      border: border(layer),
      cornerRadius: 6,
@ -97,21 +101,35 @@ export default function contactsPanel(colorScheme: ColorScheme) {
        right: 7,
      },
      ...text(layer, "sans", "variant", { size: "xs" }),
+    },
+      {
        hover: {
          ...text(layer, "sans", "hovered", { size: "xs" }),
          background: background(layer, "hovered"),
          border: border(layer, "hovered"),
-            },
-        },
+        }
+      }
+    ),
    contactRow: {
+      inactive: {
+        default: {
          padding: {
            left: sidePadding,
            right: sidePadding,
+          }
+        },
      },
      active: {
+        default: {
          background: background(layer, "active"),
+          padding: {
+            left: sidePadding,
+            right: sidePadding,
+          }
+        }
      },
    },
+
    contactAvatar: {
      cornerRadius: 10,
      width: 18,
@ -135,12 +153,13 @@ export default function contactsPanel(colorScheme: ColorScheme) {
      },
    },
    contactButtonSpacing: nameMargin,
-        contactButton: {
-            ...contactButton,
+    contactButton: interactive(
+      contactButton,
+      {
        hover: {
          background: background(layer, "hovered"),
        },
-        },
+      }),
    disabledButton: {
      ...contactButton,
      background: background(layer, "on"),
@ -149,16 +168,21 @@ export default function contactsPanel(colorScheme: ColorScheme) {
    callingIndicator: {
      ...text(layer, "mono", "variant", { size: "xs" }),
    },
-        treeBranch: {
+    treeBranch: toggleable(interactive({
      color: borderColor(layer),
      width: 1,
+    },
+      {
        hover: {
          color: borderColor(layer),
        },
-            active: {
+      }),
+      {
+        default: {
          color: borderColor(layer),
        },
-        },
+      }
+    ),
    projectRow: {
      ...projectRow,
      background: background(layer),
--- a/styles/src/styleTree/contactNotification.ts
+++ b/styles/src/styleTree/contactNotification.ts
@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, foreground, text } from "./components"
-
+import { interactive } from "./interactive"
 const avatarSize = 12
 const headerPadding = 8

@ -21,17 +21,23 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
      ...text(layer, "sans", { size: "xs" }),
      margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
    },
-        button: {
+    button:
+      interactive({
        ...text(layer, "sans", "on", { size: "xs" }),
        background: background(layer, "on"),
        padding: 4,
        cornerRadius: 6,
-            margin: { left: 6 },
+        margin: { left: 6 }
+      },
+
+        {
          hover: {
            background: background(layer, "on", "hovered"),
-            },
-        },
+          }
+        }),
+
    dismissButton: {
+      default: {
        color: foreground(layer, "variant"),
        iconWidth: 8,
        iconHeight: 8,
@ -40,6 +46,7 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
        hover: {
          color: foreground(layer, "hovered"),
        },
+      }
    },
  }
 }
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@ -1,5 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"

 export default function contextMenu(colorScheme: ColorScheme) {
  let layer = colorScheme.middle
@ -10,7 +12,7 @@ export default function contextMenu(colorScheme: ColorScheme) {
    shadow: colorScheme.popoverShadow,
    border: border(layer),
    keystrokeMargin: 30,
-        item: {
+    item: toggleable(interactive({
      iconSpacing: 8,
      iconWidth: 14,
      padding: { left: 6, right: 6, top: 2, bottom: 2 },
@ -22,7 +24,8 @@ export default function contextMenu(colorScheme: ColorScheme) {
          weight: "bold",
        }),
        padding: { left: 3, right: 3 },
-            },
+      }
+    }, {
      hover: {
        background: background(layer, "hovered"),
        label: text(layer, "sans", "hovered", { size: "sm" }),
@ -33,14 +36,16 @@ export default function contextMenu(colorScheme: ColorScheme) {
          }),
          padding: { left: 3, right: 3 },
        },
-            },
-            active: {
+      }
+    }), {
+      default: {
        background: background(layer, "active"),
      },
-            activeHover: {
+      hover: {
        background: background(layer, "active"),
      },
-        },
+    }),
+
    separator: {
      background: borderColor(layer),
      margin: { top: 2, bottom: 2 },
--- a/styles/src/styleTree/copilot.ts
+++ b/styles/src/styleTree/copilot.ts
@ -1,13 +1,14 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
-
+import { interactive } from "./interactive"
 export default function copilot(colorScheme: ColorScheme) {
  let layer = colorScheme.middle

  let content_width = 264

-    let ctaButton = {
+  let ctaButton =
    // Copied from welcome screen. FIXME: Move this into a ZDS component
+    interactive({
      background: background(layer),
      border: border(layer, "default"),
      cornerRadius: 4,
@ -23,16 +24,19 @@ export default function copilot(colorScheme: ColorScheme) {
        left: 7,
        right: 7,
      },
-        ...text(layer, "sans", "default", { size: "sm" }),
+      ...text(layer, "sans", "default", { size: "sm" })
+    },
+      {
        hover: {
          ...text(layer, "sans", "default", { size: "sm" }),
          background: background(layer, "hovered"),
          border: border(layer, "active"),
        },
-    }
+      });

  return {
-        outLinkIcon: {
+    outLinkIcon:
+      interactive({
        icon: svg(
          foreground(layer, "variant"),
          "icons/link_out_12.svg",
@ -43,18 +47,21 @@ export default function copilot(colorScheme: ColorScheme) {
          cornerRadius: 6,
          padding: { left: 6 },
        },
+      },
+        {
          hover: {
-                icon: svg(
-                    foreground(layer, "hovered"),
-                    "icons/link_out_12.svg",
-                    12,
-                    12
-                ),
-            },
+            icon: {
+              color:
+                foreground(layer, "hovered")
+            }
          },
+        }),
+
    modal: {
      titleText: {
-                ...text(layer, "sans", { size: "xs", weight: "bold" }),
+        default: {
+          ...text(layer, "sans", { size: "xs", weight: "bold" })
+        }
      },
      titlebar: {
        background: background(colorScheme.lowest),
@ -75,7 +82,8 @@ export default function copilot(colorScheme: ColorScheme) {
          bottom: 8,
        },
      },
-            closeIcon: {
+      closeIcon: interactive(
+        {
          icon: svg(
            foreground(layer, "variant"),
            "icons/x_mark_8.svg",
@ -93,7 +101,9 @@ export default function copilot(colorScheme: ColorScheme) {
            margin: {
              right: 0,
            },
+          }
        },
+        {
          hover: {
            icon: svg(
              foreground(layer, "on"),
@ -110,7 +120,7 @@ export default function copilot(colorScheme: ColorScheme) {
              8
            ),
          },
-            },
+        }),
      dimensions: {
        width: 280,
        height: 280,
@ -185,7 +195,7 @@ export default function copilot(colorScheme: ColorScheme) {
            },
          },
          right: (content_width * 1) / 3,
-                    rightContainer: {
+          rightContainer: interactive({
            border: border(colorScheme.lowest, "inverted", {
              bottom: false,
              right: false,
@ -197,7 +207,8 @@ export default function copilot(colorScheme: ColorScheme) {
              bottom: 5,
              left: 8,
              right: 0,
-                        },
+            }
+          }, {
            hover: {
              border: border(layer, "active", {
                bottom: false,
@ -206,7 +217,7 @@ export default function copilot(colorScheme: ColorScheme) {
                left: true,
              }),
            },
-                    },
+          })
        },
      },

--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@ -4,6 +4,8 @@ import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"

 import { buildSyntax } from "../theme/syntax"
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"

 export default function editor(colorScheme: ColorScheme) {
  const { isLight } = colorScheme
@ -48,44 +50,49 @@ export default function editor(colorScheme: ColorScheme) {
    // Inline autocomplete suggestions, Co-pilot suggestions, etc.
    suggestion: syntax.predictive,
    codeActions: {
-            indicator: {
+      indicator: toggleable(interactive({
        color: foreground(layer, "variant"),
-
+      }, {
        clicked: {
          color: foreground(layer, "base"),
        },
        hover: {
          color: foreground(layer, "on"),
        },
-                active: {
+      }),
+        {
+          default: {
            color: foreground(layer, "on"),
-                },
-            },
+          }
+        }),
+
      verticalScale: 0.55,
    },
    folds: {
      iconMarginScale: 2.5,
      foldedIcon: "icons/chevron_right_8.svg",
      foldableIcon: "icons/chevron_down_8.svg",
-            indicator: {
+      indicator: toggleable(interactive({
        color: foreground(layer, "variant"),
-
+      }, {
        clicked: {
          color: foreground(layer, "base"),
        },
        hover: {
          color: foreground(layer, "on"),
        },
-                active: {
+      }),
+        {
+          default: {
            color: foreground(layer, "on"),
-                },
-            },
+          }
+        }),
      ellipses: {
        textColor: colorScheme.ramps.neutral(0.71).hex(),
        cornerRadiusFactor: 0.15,
        background: {
          // Copied from hover_popover highlight
-                    color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
+          default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() },

          hover: {
            color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
@ -223,7 +230,7 @@ export default function editor(colorScheme: ColorScheme) {
      color: syntax.linkUri.color,
      underline: syntax.linkUri.underline,
    },
-        jumpIcon: {
+    jumpIcon: interactive({
      color: foreground(layer, "on"),
      iconWidth: 20,
      buttonWidth: 20,
@ -233,11 +240,13 @@ export default function editor(colorScheme: ColorScheme) {
        bottom: 6,
        left: 6,
        right: 6,
-            },
+      }
+    }, {
      hover: {
        background: background(layer, "on", "hovered"),
-            },
-        },
+      }
+    }),
+
    scrollbar: {
      width: 12,
      minHeightFactor: 1.0,
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@ -1,6 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
+import { toggleable } from "./toggle"
+import { interactive } from "./interactive"

 export default function picker(colorScheme: ColorScheme): any {
  let layer = colorScheme.lowest
@ -38,7 +40,7 @@ export default function picker(colorScheme: ColorScheme): any {
      ...container,
      padding: {},
    },
-        item: {
+    item: toggleable(interactive({
      padding: {
        bottom: 4,
        left: 12,
@ -53,20 +55,22 @@ export default function picker(colorScheme: ColorScheme): any {
      cornerRadius: 8,
      text: text(layer, "sans", "variant"),
      highlightText: text(layer, "sans", "accent", { weight: "bold" }),
-            active: {
+    }, {
+      hover: {
+        background: withOpacity(background(layer, "hovered"), 0.5),
+      }
+    }),
+      {
+        default: {
          background: withOpacity(
            background(layer, "base", "active"),
            0.5
          ),
-                text: text(layer, "sans", "base", "active"),
-                highlightText: text(layer, "sans", "accent", {
-                    weight: "bold",
+          //text: text(layer, "sans", "base", "active"),
+        }
      }),
-            },
-            hover: {
-                background: withOpacity(background(layer, "hovered"), 0.5),
-            },
-        },
+
+
    inputEditor,
    emptyInputEditor,
    noMatches: {
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@ -1,7 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
-
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
 export default function projectPanel(colorScheme: ColorScheme) {
  const { isLight } = colorScheme

@ -28,27 +29,32 @@ export default function projectPanel(colorScheme: ColorScheme) {
    },
  }

-    let entry = {
+  let entry = toggleable(interactive({
    ...baseEntry,
    text: text(layer, "mono", "variant", { size: "sm" }),
+    status,
+  },
+    {
      hover: {
        background: background(layer, "variant", "hovered"),
-        },
-        active: {
-            background: colorScheme.isLight
-                ? withOpacity(background(layer, "active"), 0.5)
-                : background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
-        },
-        activeHover: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
-        },
-        status,
      }
+    }),
+    {
+      default: {
+        /*background: colorScheme.isLight
+          ? withOpacity(background(layer, "active"), 0.5)
+          : background(layer, "active") ,*/ // todo posiewic
+        text: text(layer, "mono", "active", { size: "sm" }),
+      },
+      hover: {
+        //background: background(layer, "active"),
+        text: text(layer, "mono", "active", { size: "sm" }),
+      },
+
+    });

  return {
-        openProjectButton: {
+    openProjectButton: interactive({
      background: background(layer),
      border: border(layer, "active"),
      cornerRadius: 4,
@ -63,13 +69,14 @@ export default function projectPanel(colorScheme: ColorScheme) {
        left: 7,
        right: 7,
      },
-            ...text(layer, "sans", "default", { size: "sm" }),
+      ...text(layer, "sans", "default", { size: "sm" })
+    }, {
      hover: {
        ...text(layer, "sans", "default", { size: "sm" }),
        background: background(layer, "hovered"),
        border: border(layer, "active"),
      },
-        },
+    }),
    background: background(layer),
    padding: { left: 6, right: 6, top: 0, bottom: 6 },
    indentWidth: 12,
@ -94,9 +101,14 @@ export default function projectPanel(colorScheme: ColorScheme) {
      ...entry,
      text: text(layer, "mono", "disabled"),
      active: {
+        ...entry.active,
+        default: {
+          ...entry.active.default,
          background: background(layer, "active"),
          text: text(layer, "mono", "disabled", { size: "sm" }),
        },
+
+      },
    },
    filenameEditor: {
      background: background(layer, "on"),
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
-
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
 export default function statusBar(colorScheme: ColorScheme) {
  let layer = colorScheme.lowest

@ -25,33 +26,40 @@ export default function statusBar(colorScheme: ColorScheme) {
    },
    border: border(layer, { top: true, overlay: true }),
    cursorPosition: text(layer, "sans", "variant"),
-        activeLanguage: {
+    activeLanguage: interactive({
      padding: { left: 6, right: 6 },
-            ...text(layer, "sans", "variant"),
+      ...text(layer, "sans", "variant")
+    },
+      {
        hover: {
          ...text(layer, "sans", "on"),
+        }
      },
-        },
+    ),
    autoUpdateProgressMessage: text(layer, "sans", "variant"),
    autoUpdateDoneMessage: text(layer, "sans", "variant"),
-        lspStatus: {
+    lspStatus: interactive({
      ...diagnosticStatusContainer,
      iconSpacing: 4,
      iconWidth: 14,
      height: 18,
      message: text(layer, "sans"),
-            iconColor: foreground(layer),
+      iconColor: foreground(layer)
+    },
+      {
        hover: {
          message: text(layer, "sans"),
          iconColor: foreground(layer),
          background: background(layer, "hovered"),
+        }
+      }),
+    diagnosticMessage: interactive({
+      ...text(layer, "sans")
    },
-        },
-        diagnosticMessage: {
-            ...text(layer, "sans"),
-            hover: text(layer, "sans", "hovered"),
-        },
-        diagnosticSummary: {
+      { hover: text(layer, "sans", "hovered") },
+    ),
+    diagnosticSummary:
+      interactive({
        height: 20,
        iconWidth: 16,
        iconSpacing: 2,
@ -73,31 +81,29 @@ export default function statusBar(colorScheme: ColorScheme) {
          ...diagnosticStatusContainer,
          background: background(layer, "negative"),
          border: border(layer, "negative"),
-            },
+        }
+      }, {
        hover: {
          iconColorOk: foreground(layer, "on"),
          containerOk: {
-                    cornerRadius: 6,
-                    padding: { top: 3, bottom: 3, left: 7, right: 7 },
            background: background(layer, "on", "hovered"),
          },
          containerWarning: {
-                    ...diagnosticStatusContainer,
            background: background(layer, "warning", "hovered"),
            border: border(layer, "warning", "hovered"),
          },
          containerError: {
-                    ...diagnosticStatusContainer,
            background: background(layer, "negative", "hovered"),
            border: border(layer, "negative", "hovered"),
-                },
-            },
-        },
+          }
+        }
+      }
+      ),
    panelButtons: {
      groupLeft: {},
      groupBottom: {},
      groupRight: {},
-            button: {
+      button: toggleable(interactive({
        ...statusContainer,
        iconSize: 16,
        iconColor: foreground(layer, "variant"),
@ -105,15 +111,18 @@ export default function statusBar(colorScheme: ColorScheme) {
          margin: { left: 6 },
          ...text(layer, "sans", { size: "sm" }),
        },
+      }, {
        hover: {
          iconColor: foreground(layer, "hovered"),
          background: background(layer, "variant"),
-                },
-                active: {
+        }
+      }),
+        {
+          default: {
            iconColor: foreground(layer, "active"),
            background: background(layer, "active"),
-                },
-            },
+          }
+        }),
      badge: {
        cornerRadius: 3,
        padding: 2,
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@ -1,6 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
+import { toggleable } from "./toggle"
+import { interactive } from "./interactive"

 export default function tabBar(colorScheme: ColorScheme) {
  const height = 32
@ -87,17 +89,22 @@ export default function tabBar(colorScheme: ColorScheme) {
      inactiveTab: inactivePaneInactiveTab,
    },
    draggedTab,
-        paneButton: {
+    paneButton: toggleable(interactive({
      color: foreground(layer, "variant"),
      iconWidth: 12,
      buttonWidth: activePaneActiveTab.height,
+    },
+      {
        hover: {
          color: foreground(layer, "hovered"),
-            },
-            active: {
+        }
+      }),
+      {
+        default: {
          color: foreground(layer, "accent"),
+        }
      },
-        },
+    ),
    paneButtonContainer: {
      background: tab.background,
      border: {
--- a/styles/src/styleTree/welcome.ts
+++ b/styles/src/styleTree/welcome.ts
@ -8,6 +8,7 @@ import {
  TextProperties,
  svg,
 } from "./components"
+import { interactive } from "./interactive"

 export default function welcome(colorScheme: ColorScheme) {
  let layer = colorScheme.highest
@ -63,7 +64,7 @@ export default function welcome(colorScheme: ColorScheme) {
        bottom: 2,
      },
    },
-        button: {
+    button: interactive({
      background: background(layer),
      border: border(layer, "active"),
      cornerRadius: 4,
@ -77,13 +78,14 @@ export default function welcome(colorScheme: ColorScheme) {
        left: 7,
        right: 7,
      },
-            ...text(layer, "sans", "default", interactive_text_size),
+      ...text(layer, "sans", "default", interactive_text_size)
+    }, {
      hover: {
        ...text(layer, "sans", "default", interactive_text_size),
        background: background(layer, "hovered"),
-                border: border(layer, "active"),
-            },
-        },
+      }
+    }),
+
    usageNote: {
      ...text(layer, "sans", "variant", { size: "2xs" }),
      padding: {
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
+import { toggleable } from "./toggle"
 import {
  background,
  border,
@ -10,12 +11,13 @@ import {
 } from "./components"
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
-
+import { interactive } from "./interactive"
+import merge from 'ts-deepmerge';
 export default function workspace(colorScheme: ColorScheme) {
  const layer = colorScheme.lowest
  const isLight = colorScheme.isLight
  const itemSpacing = 8
-    const titlebarButton = {
+  const titlebarButton = toggleable(interactive({
    cornerRadius: 6,
    padding: {
      top: 1,
@ -26,6 +28,7 @@ export default function workspace(colorScheme: ColorScheme) {
    ...text(layer, "sans", "variant", { size: "xs" }),
    background: background(layer, "variant"),
    border: border(layer),
+  }, {
    hover: {
      ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
      background: background(layer, "variant", "hovered"),
@ -35,13 +38,16 @@ export default function workspace(colorScheme: ColorScheme) {
      ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
      background: background(layer, "variant", "pressed"),
      border: border(layer, "variant", "pressed"),
-        },
-        active: {
+    }
+  }),
+    {
+      default: {
        ...text(layer, "sans", "variant", "active", { size: "xs" }),
        background: background(layer, "variant", "active"),
        border: border(layer, "variant", "active"),
-        },
      }
+    },
+  );
  const avatarWidth = 18
  const avatarOuterWidth = avatarWidth + 4
  const followerAvatarWidth = 14
@ -78,7 +84,8 @@ export default function workspace(colorScheme: ColorScheme) {
        },
        cornerRadius: 4,
      },
-            keyboardHint: {
+      keyboardHint:
+        interactive({
          ...text(layer, "sans", "variant", { size: "sm" }),
          padding: {
            top: 3,
@ -86,11 +93,13 @@ export default function workspace(colorScheme: ColorScheme) {
            right: 8,
            bottom: 3,
          },
-                cornerRadius: 8,
+          cornerRadius: 8
+        }, {
          hover: {
            ...text(layer, "sans", "active", { size: "sm" }),
-                },
-            },
+          }
+        }),
+
      keyboardHintWidth: 320,
    },
    joiningProjectAvatar: {
@ -201,12 +210,18 @@ export default function workspace(colorScheme: ColorScheme) {

      // Sign in buttom
      // FlatButton, Variant
-            signInPrompt: {
+      signInPrompt:
+        merge(titlebarButton,
+          {
+            inactive: {
+              default: {
                margin: {
                  left: itemSpacing,
                },
-                ...titlebarButton,
-            },
+              }
+            }
+          }),
+

      // Offline Indicator
      offlineIcon: {
@ -234,26 +249,25 @@ export default function workspace(colorScheme: ColorScheme) {
        },
        cornerRadius: 6,
      },
-            callControl: {
+      callControl: interactive({
        cornerRadius: 6,
        color: foreground(layer, "variant"),
        iconWidth: 12,
        buttonWidth: 20,
+      }, {
        hover: {
          background: background(layer, "variant", "hovered"),
          color: foreground(layer, "variant", "hovered"),
        },
-            },
-            toggleContactsButton: {
+      }),
+      toggleContactsButton: toggleable(interactive({
        margin: { left: itemSpacing },
        cornerRadius: 6,
        color: foreground(layer, "variant"),
        iconWidth: 14,
        buttonWidth: 20,
-                active: {
-                    background: background(layer, "variant", "active"),
-                    color: foreground(layer, "variant", "active"),
      },
+        {
          clicked: {
            background: background(layer, "variant", "pressed"),
            color: foreground(layer, "variant", "pressed"),
@ -261,13 +275,30 @@ export default function workspace(colorScheme: ColorScheme) {
          hover: {
            background: background(layer, "variant", "hovered"),
            color: foreground(layer, "variant", "hovered"),
+          }
+        }),
+        {
+          default: {
+            background: background(layer, "variant", "active"),
+            color: foreground(layer, "variant", "active")
+          }
        },
-            },
-            userMenuButton: {
+      ),
+      userMenuButton: merge(titlebarButton, {
+        inactive: {
+          default: {
            buttonWidth: 20,
+            iconWidth: 12
+          }
+        }, active: { // posiewic: these properties are not currently set on main
+          default: {
            iconWidth: 12,
-                ...titlebarButton,
-            },
+            button_width: 20,
+          }
+        }
+      }),
+
+
      toggleContactsBadge: {
        cornerRadius: 3,
        padding: 2,
@ -285,11 +316,13 @@ export default function workspace(colorScheme: ColorScheme) {
      background: background(colorScheme.highest),
      border: border(colorScheme.highest, { bottom: true }),
      itemSpacing: 8,
-            navButton: {
+      navButton: interactive(
+        {
          color: foreground(colorScheme.highest, "on"),
          iconWidth: 12,
          buttonWidth: 24,
          cornerRadius: 6,
+        }, {
        hover: {
          color: foreground(colorScheme.highest, "on", "hovered"),
          background: background(
@ -301,22 +334,23 @@ export default function workspace(colorScheme: ColorScheme) {
        disabled: {
          color: foreground(colorScheme.highest, "on", "disabled"),
        },
-            },
+      }),
      padding: { left: 8, right: 8, top: 4, bottom: 4 },
    },
    breadcrumbHeight: 24,
-        breadcrumbs: {
+    breadcrumbs: interactive({
      ...text(colorScheme.highest, "sans", "variant"),
      cornerRadius: 6,
      padding: {
        left: 6,
        right: 6,
-            },
+      }
+    }, {
      hover: {
        color: foreground(colorScheme.highest, "on", "hovered"),
        background: background(colorScheme.highest, "on", "hovered"),
      },
-        },
+    }),
    disconnectedOverlay: {
      ...text(layer, "sans"),
      background: withOpacity(background(layer), 0.8),