Split Interactive into Interactive and Toggleable (#2628)

This is a part of the intensity driven theme rewrite. 

It introduces the `toggle` and `interactive` helper functions to build
Toggle<T> and Interactive<T> styles for interactive elements in the
theme.

This PR also removes the `theme_testbench` crate and related actions.

Huge thanks to @osiewicz and @mikayla-maki for pushing this forward 🙏🏽

Release Notes:

- Updated the style of many interactive elements.

styles/src/buildTokens.ts

@@ -1,13 +1,13 @@
-import * as fs from "fs";
-import * as path from "path";
-import { ColorScheme, createColorScheme } from "./common";
-import { themes } from "./themes";
-import { slugify } from "./utils/slugify";
-import { colorSchemeTokens } from "./theme/tokens/colorScheme";
+import * as fs from "fs"
+import * as path from "path"
+import { ColorScheme, createColorScheme } from "./common"
+import { themes } from "./themes"
+import { slugify } from "./utils/slugify"
+import { colorSchemeTokens } from "./theme/tokens/colorScheme"
 
-const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens");
-const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json");
-const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json");
+const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
+const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
+const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json")
 
 function clearTokens(tokensDirectory: string) {
     if (!fs.existsSync(tokensDirectory)) {
@@ -22,64 +22,66 @@ function clearTokens(tokensDirectory: string) {
 }
 
 type TokenSet = {
-    id: string;
-    name: string;
-    selectedTokenSets: { [key: string]: "enabled" };
-};
+    id: string
+    name: string
+    selectedTokenSets: { [key: string]: "enabled" }
+}
 
-function buildTokenSetOrder(colorSchemes: ColorScheme[]): { tokenSetOrder: string[] } {
-    const tokenSetOrder: string[] = colorSchemes.map(
-        (scheme) => scheme.name.toLowerCase().replace(/\s+/g, "_")
-    );
-    return { tokenSetOrder };
+function buildTokenSetOrder(colorSchemes: ColorScheme[]): {
+    tokenSetOrder: string[]
+} {
+    const tokenSetOrder: string[] = colorSchemes.map((scheme) =>
+        scheme.name.toLowerCase().replace(/\s+/g, "_")
+    )
+    return { tokenSetOrder }
 }
 
 function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] {
     const themesIndex: TokenSet[] = colorSchemes.map((scheme, index) => {
         const id = `${scheme.isLight ? "light" : "dark"}_${scheme.name
             .toLowerCase()
-            .replace(/\s+/g, "_")}_${index}`;
-        const selectedTokenSets: { [key: string]: "enabled" } = {};
-        const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_");
-        selectedTokenSets[tokenSet] = "enabled";
+            .replace(/\s+/g, "_")}_${index}`
+        const selectedTokenSets: { [key: string]: "enabled" } = {}
+        const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_")
+        selectedTokenSets[tokenSet] = "enabled"
 
         return {
             id,
             name: `${scheme.name} - ${scheme.isLight ? "Light" : "Dark"}`,
             selectedTokenSets,
-        };
-    });
+        }
+    })
 
-    return themesIndex;
+    return themesIndex
 }
 
 function writeTokens(colorSchemes: ColorScheme[], tokensDirectory: string) {
-    clearTokens(tokensDirectory);
+    clearTokens(tokensDirectory)
 
     for (const colorScheme of colorSchemes) {
-        const fileName = slugify(colorScheme.name) + ".json";
-        const tokens = colorSchemeTokens(colorScheme);
-        const tokensJSON = JSON.stringify(tokens, null, 2);
-        const outPath = path.join(tokensDirectory, fileName);
-        fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 });
-        console.log(`- ${outPath} created`);
+        const fileName = slugify(colorScheme.name) + ".json"
+        const tokens = colorSchemeTokens(colorScheme)
+        const tokensJSON = JSON.stringify(tokens, null, 2)
+        const outPath = path.join(tokensDirectory, fileName)
+        fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 })
+        console.log(`- ${outPath} created`)
     }
 
-    const themeIndexData = buildThemesIndex(colorSchemes);
+    const themeIndexData = buildThemesIndex(colorSchemes)
 
-    const themesJSON = JSON.stringify(themeIndexData, null, 2);
-    fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 });
-    console.log(`- ${TOKENS_FILE} created`);
+    const themesJSON = JSON.stringify(themeIndexData, null, 2)
+    fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 })
+    console.log(`- ${TOKENS_FILE} created`)
 
-    const tokenSetOrderData = buildTokenSetOrder(colorSchemes);
+    const tokenSetOrderData = buildTokenSetOrder(colorSchemes)
 
-    const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2);
-    fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 });
-    console.log(`- ${METADATA_FILE} created`);
+    const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2)
+    fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 })
+    console.log(`- ${METADATA_FILE} created`)
 }
 
 const colorSchemes: ColorScheme[] = themes.map((theme) =>
     createColorScheme(theme)
-);
+)
 
-writeTokens(colorSchemes, TOKENS_DIRECTORY);
+writeTokens(colorSchemes, TOKENS_DIRECTORY)

styles/src/element/index.ts

@@ -0,0 +1,4 @@
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
+
+export { interactive, toggleable }

styles/src/element/interactive.test.ts

@@ -0,0 +1,56 @@
+import {
+    NOT_ENOUGH_STATES_ERROR,
+    NO_DEFAULT_OR_BASE_ERROR,
+    interactive,
+} from "./interactive"
+import { describe, it, expect } from "vitest"
+
+describe("interactive", () => {
+    it("creates an Interactive<Element> with base properties and states", () => {
+        const result = interactive({
+            base: { fontSize: 10, color: "#FFFFFF" },
+            state: {
+                hovered: { color: "#EEEEEE" },
+                clicked: { color: "#CCCCCC" },
+            },
+        })
+
+        expect(result).toEqual({
+            default: { color: "#FFFFFF", fontSize: 10 },
+            hovered: { color: "#EEEEEE", fontSize: 10 },
+            clicked: { color: "#CCCCCC", fontSize: 10 },
+        })
+    })
+
+    it("creates an Interactive<Element> with no base properties", () => {
+        const result = interactive({
+            state: {
+                default: { color: "#FFFFFF", fontSize: 10 },
+                hovered: { color: "#EEEEEE" },
+                clicked: { color: "#CCCCCC" },
+            },
+        })
+
+        expect(result).toEqual({
+            default: { color: "#FFFFFF", fontSize: 10 },
+            hovered: { color: "#EEEEEE", fontSize: 10 },
+            clicked: { color: "#CCCCCC", fontSize: 10 },
+        })
+    })
+
+    it("throws error when both default and base are missing", () => {
+        const state = {
+            hovered: { color: "blue" },
+        }
+
+        expect(() => interactive({ state })).toThrow(NO_DEFAULT_OR_BASE_ERROR)
+    })
+
+    it("throws error when no other state besides default is present", () => {
+        const state = {
+            default: { fontSize: 10 },
+        }
+
+        expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR)
+    })
+})

styles/src/element/interactive.ts

@@ -0,0 +1,97 @@
+import merge from "ts-deepmerge"
+import { DeepPartial } from "utility-types"
+
+type InteractiveState =
+    | "default"
+    | "hovered"
+    | "clicked"
+    | "selected"
+    | "disabled"
+
+type Interactive<T> = {
+    default: T
+    hovered?: T
+    clicked?: T
+    selected?: T
+    disabled?: T
+}
+
+export const NO_DEFAULT_OR_BASE_ERROR =
+    "An interactive object must have a default state, or a base property."
+export const NOT_ENOUGH_STATES_ERROR =
+    "An interactive object must have a default and at least one other state."
+
+interface InteractiveProps<T> {
+    base?: T
+    state: Partial<Record<InteractiveState, DeepPartial<T>>>
+}
+
+/**
+ * Helper function for creating Interactive<T> objects that works with Toggle<T>-like behavior.
+ * It takes a default object to be used as the value for `default` field and fills out other fields
+ * with fields from either `base` or from the `state` object which contains values for specific states.
+ * Notably, it does not touch `hover`, `clicked`, `selected` and `disabled` states if there are no modifications for them.
+ *
+ * @param defaultObj Object to be used as the value for the `default` field.
+ * @param base Optional object containing base fields to be included in the resulting object.
+ * @param state Object containing optional modified fields to be included in the resulting object for each state.
+ * @returns Interactive<T> object with fields from `base` and `state`.
+ */
+export function interactive<T extends Object>({
+    base,
+    state,
+}: InteractiveProps<T>): Interactive<T> {
+    if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
+
+    let defaultState: T
+
+    if (state.default && base) {
+        defaultState = merge(base, state.default) as T
+    } else {
+        defaultState = base ? base : (state.default as T)
+    }
+
+    let interactiveObj: Interactive<T> = {
+        default: defaultState,
+    }
+
+    let stateCount = 0
+
+    if (state.hovered !== undefined) {
+        interactiveObj.hovered = merge(
+            interactiveObj.default,
+            state.hovered
+        ) as T
+        stateCount++
+    }
+
+    if (state.clicked !== undefined) {
+        interactiveObj.clicked = merge(
+            interactiveObj.default,
+            state.clicked
+        ) as T
+        stateCount++
+    }
+
+    if (state.selected !== undefined) {
+        interactiveObj.selected = merge(
+            interactiveObj.default,
+            state.selected
+        ) as T
+        stateCount++
+    }
+
+    if (state.disabled !== undefined) {
+        interactiveObj.disabled = merge(
+            interactiveObj.default,
+            state.disabled
+        ) as T
+        stateCount++
+    }
+
+    if (stateCount < 1) {
+        throw new Error(NOT_ENOUGH_STATES_ERROR)
+    }
+
+    return interactiveObj
+}

styles/src/element/toggle.test.ts

@@ -0,0 +1,52 @@
+import {
+    NO_ACTIVE_ERROR,
+    NO_INACTIVE_OR_BASE_ERROR,
+    toggleable,
+} from "./toggle"
+import { describe, it, expect } from "vitest"
+
+describe("toggleable", () => {
+    it("creates a Toggleable<Element> with base properties and states", () => {
+        const result = toggleable({
+            base: { background: "#000000", color: "#CCCCCC" },
+            state: {
+                active: { color: "#FFFFFF" },
+            },
+        })
+
+        expect(result).toEqual({
+            inactive: { background: "#000000", color: "#CCCCCC" },
+            active: { background: "#000000", color: "#FFFFFF" },
+        })
+    })
+
+    it("creates a Toggleable<Element> with no base properties", () => {
+        const result = toggleable({
+            state: {
+                inactive: { background: "#000000", color: "#CCCCCC" },
+                active: { background: "#000000", color: "#FFFFFF" },
+            },
+        })
+
+        expect(result).toEqual({
+            inactive: { background: "#000000", color: "#CCCCCC" },
+            active: { background: "#000000", color: "#FFFFFF" },
+        })
+    })
+
+    it("throws error when both inactive and base are missing", () => {
+        const state = {
+            active: { background: "#000000", color: "#FFFFFF" },
+        }
+
+        expect(() => toggleable({ state })).toThrow(NO_INACTIVE_OR_BASE_ERROR)
+    })
+
+    it("throws error when no active state is present", () => {
+        const state = {
+            inactive: { background: "#000000", color: "#CCCCCC" },
+        }
+
+        expect(() => toggleable({ state })).toThrow(NO_ACTIVE_ERROR)
+    })
+})

styles/src/element/toggle.ts

@@ -0,0 +1,47 @@
+import merge from "ts-deepmerge"
+import { DeepPartial } from "utility-types"
+
+type ToggleState = "inactive" | "active"
+
+type Toggleable<T> = Record<ToggleState, T>
+
+export const NO_INACTIVE_OR_BASE_ERROR =
+    "A toggleable object must have an inactive state, or a base property."
+export const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
+
+interface ToggleableProps<T> {
+    base?: T
+    state: Partial<Record<ToggleState, DeepPartial<T>>>
+}
+
+/**
+ * Helper function for creating Toggleable objects.
+ * @template T The type of the object being toggled.
+ * @param props Object containing the base (inactive) state and state modifications to create the active state.
+ * @returns A Toggleable object containing both the inactive and active states.
+ * @example
+ * ```
+ * toggleable({
+ *   base: { background: "#000000", text: "#CCCCCC" },
+ *   state: { active: { text: "#CCCCCC" } },
+ * })
+ * ```
+ */
+export function toggleable<T extends object>(
+    props: ToggleableProps<T>
+): Toggleable<T> {
+    const { base, state } = props
+
+    if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
+    if (!state.active) throw new Error(NO_ACTIVE_ERROR)
+
+    const inactiveState = base
+        ? ((state.inactive ? merge(base, state.inactive) : base) as T)
+        : (state.inactive as T)
+
+    const toggleObj: Toggleable<T> = {
+        inactive: inactiveState,
+        active: merge(base ?? {}, state.active) as T,
+    }
+    return toggleObj
+}

styles/src/styleTree/app.ts

@@ -1,4 +1,3 @@
-import { text } from "./components"
 import contactFinder from "./contactFinder"
 import contactsPopover from "./contactsPopover"
 import commandPalette from "./commandPalette"

styles/src/styleTree/assistant.ts

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
+import { interactive } from "../element"
 
 export default function assistant(colorScheme: ColorScheme) {
     const layer = colorScheme.highest
@@ -15,13 +16,28 @@ export default function assistant(colorScheme: ColorScheme) {
             background: editor(colorScheme).background,
         },
         userSender: {
-            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
+            default: {
+                ...text(layer, "sans", "default", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         assistantSender: {
-            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
+            default: {
+                ...text(layer, "sans", "accent", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         systemSender: {
-            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
+            default: {
+                ...text(layer, "sans", "variant", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         sentAt: {
             margin: { top: 2, left: 8 },
@@ -30,16 +46,20 @@ export default function assistant(colorScheme: ColorScheme) {
         modelInfoContainer: {
             margin: { right: 16, top: 4 },
         },
-        model: {
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            padding: 4,
-            cornerRadius: 4,
-            ...text(layer, "sans", "default", { size: "xs" }),
-            hover: {
-                background: background(layer, "on", "hovered"),
+        model: interactive({
+            base: {
+                background: background(layer, "on"),
+                border: border(layer, "on", { overlay: true }),
+                padding: 4,
+                cornerRadius: 4,
+                ...text(layer, "sans", "default", { size: "xs" }),
             },
-        },
+            state: {
+                hovered: {
+                    background: background(layer, "on", "hovered"),
+                },
+            },
+        }),
         remainingTokens: {
             background: background(layer, "on"),
             border: border(layer, "on", { overlay: true }),

styles/src/styleTree/commandPalette.ts

@@ -1,12 +1,13 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
+import { toggleable } from "../element"
 
 export default function commandPalette(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
-    return {
-        keystrokeSpacing: 8,
-        key: {
+
+    const key = toggleable({
+        base: {
             text: text(layer, "mono", "variant", "default", { size: "xs" }),
             cornerRadius: 2,
             background: background(layer, "on"),
@@ -21,10 +22,21 @@ export default function commandPalette(colorScheme: ColorScheme) {
                 bottom: 1,
                 left: 2,
             },
+        },
+        state: {
             active: {
                 text: text(layer, "mono", "on", "default", { size: "xs" }),
                 background: withOpacity(background(layer, "on"), 0.2),
             },
         },
+    })
+
+    return {
+        keystrokeSpacing: 8,
+        // TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
+        key: {
+            inactive: { ...key.inactive },
+            active: key.active,
+        },
     }
 }

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

styles/src/styleTree/contactList.ts

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function contactsPanel(colorScheme: ColorScheme) {
     const nameMargin = 8
     const sidePadding = 12
@@ -71,47 +71,85 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         },
         rowHeight: 28,
         sectionIconSize: 8,
-        headerRow: {
-            ...text(layer, "mono", { size: "sm" }),
-            margin: { top: 14 },
-            padding: {
-                left: sidePadding,
-                right: sidePadding,
+        headerRow: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "mono", { size: "sm" }),
+                    margin: { top: 14 },
+                    padding: {
+                        left: sidePadding,
+                        right: sidePadding,
+                    },
+                    background: background(layer, "default"), // posiewic: breaking change
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(layer, "mono", "active", { size: "sm" }),
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
             },
-            active: {
-                ...text(layer, "mono", "active", { size: "sm" }),
-                background: background(layer, "active"),
+        }),
+        leaveCall: interactive({
+            base: {
+                background: background(layer),
+                border: border(layer),
+                cornerRadius: 6,
+                margin: {
+                    top: 1,
+                },
+                padding: {
+                    top: 1,
+                    bottom: 1,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "variant", { size: "xs" }),
             },
-        },
-        leaveCall: {
-            background: background(layer),
-            border: border(layer),
-            cornerRadius: 6,
-            margin: {
-                top: 1,
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "hovered", { size: "xs" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "hovered"),
+                },
             },
-            padding: {
-                top: 1,
-                bottom: 1,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "variant", { size: "xs" }),
-            hover: {
-                ...text(layer, "sans", "hovered", { size: "xs" }),
-                background: background(layer, "hovered"),
-                border: border(layer, "hovered"),
-            },
-        },
+        }),
         contactRow: {
-            padding: {
-                left: sidePadding,
-                right: sidePadding,
+            inactive: {
+                default: {
+                    padding: {
+                        left: sidePadding,
+                        right: sidePadding,
+                    },
+                },
             },
             active: {
-                background: background(layer, "active"),
+                default: {
+                    background: background(layer, "active"),
+                    padding: {
+                        left: sidePadding,
+                        right: sidePadding,
+                    },
+                },
             },
         },
+
         contactAvatar: {
             cornerRadius: 10,
             width: 18,
@@ -135,12 +173,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
             },
         },
         contactButtonSpacing: nameMargin,
-        contactButton: {
-            ...contactButton,
-            hover: {
-                background: background(layer, "hovered"),
+        contactButton: interactive({
+            base: { ...contactButton },
+            state: {
+                hovered: {
+                    background: background(layer, "hovered"),
+                },
             },
-        },
+        }),
         disabledButton: {
             ...contactButton,
             background: background(layer, "on"),
@@ -149,34 +189,52 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         callingIndicator: {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
-        treeBranch: {
-            color: borderColor(layer),
-            width: 1,
-            hover: {
-                color: borderColor(layer),
+        treeBranch: toggleable({
+            base: interactive({
+                base: {
+                    color: borderColor(layer),
+                    width: 1,
+                },
+                state: {
+                    hovered: {
+                        color: borderColor(layer),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        color: borderColor(layer),
+                    },
+                },
             },
-            active: {
-                color: borderColor(layer),
+        }),
+        projectRow: toggleable({
+            base: interactive({
+                base: {
+                    ...projectRow,
+                    background: background(layer),
+                    icon: {
+                        margin: { left: nameMargin },
+                        color: foreground(layer, "variant"),
+                        width: 12,
+                    },
+                    name: {
+                        ...projectRow.name,
+                        ...text(layer, "mono", { size: "sm" }),
+                    },
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: { background: background(layer, "active") },
+                },
             },
-        },
-        projectRow: {
-            ...projectRow,
-            background: background(layer),
-            icon: {
-                margin: { left: nameMargin },
-                color: foreground(layer, "variant"),
-                width: 12,
-            },
-            name: {
-                ...projectRow.name,
-                ...text(layer, "mono", { size: "sm" }),
-            },
-            hover: {
-                background: background(layer, "hovered"),
-            },
-            active: {
-                background: background(layer, "active"),
-            },
-        },
+        }),
     }
 }

styles/src/styleTree/contactNotification.ts

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, foreground, text } from "./components"
-
+import { interactive } from "../element"
 const avatarSize = 12
 const headerPadding = 8
 
@@ -21,24 +21,32 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
         },
-        button: {
-            ...text(layer, "sans", "on", { size: "xs" }),
-            background: background(layer, "on"),
-            padding: 4,
-            cornerRadius: 6,
-            margin: { left: 6 },
-            hover: {
-                background: background(layer, "on", "hovered"),
+        button: interactive({
+            base: {
+                ...text(layer, "sans", "on", { size: "xs" }),
+                background: background(layer, "on"),
+                padding: 4,
+                cornerRadius: 6,
+                margin: { left: 6 },
             },
-        },
+
+            state: {
+                hovered: {
+                    background: background(layer, "on", "hovered"),
+                },
+            },
+        }),
+
         dismissButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
+            default: {
+                color: foreground(layer, "variant"),
+                iconWidth: 8,
+                iconHeight: 8,
+                buttonWidth: 8,
+                buttonHeight: 8,
+                hover: {
+                    color: foreground(layer, "hovered"),
+                },
             },
         },
     }

styles/src/styleTree/contextMenu.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function contextMenu(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
@@ -10,37 +11,54 @@ export default function contextMenu(colorScheme: ColorScheme) {
         shadow: colorScheme.popoverShadow,
         border: border(layer),
         keystrokeMargin: 30,
-        item: {
-            iconSpacing: 8,
-            iconWidth: 14,
-            padding: { left: 6, right: 6, top: 2, bottom: 2 },
-            cornerRadius: 6,
-            label: text(layer, "sans", { size: "sm" }),
-            keystroke: {
-                ...text(layer, "sans", "variant", {
-                    size: "sm",
-                    weight: "bold",
-                }),
-                padding: { left: 3, right: 3 },
-            },
-            hover: {
-                background: background(layer, "hovered"),
-                label: text(layer, "sans", "hovered", { size: "sm" }),
-                keystroke: {
-                    ...text(layer, "sans", "hovered", {
-                        size: "sm",
-                        weight: "bold",
-                    }),
-                    padding: { left: 3, right: 3 },
+        item: toggleable({
+            base: interactive({
+                base: {
+                    iconSpacing: 8,
+                    iconWidth: 14,
+                    padding: { left: 6, right: 6, top: 2, bottom: 2 },
+                    cornerRadius: 6,
+                    label: text(layer, "sans", { size: "sm" }),
+                    keystroke: {
+                        ...text(layer, "sans", "variant", {
+                            size: "sm",
+                            weight: "bold",
+                        }),
+                        padding: { left: 3, right: 3 },
+                    },
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                        label: text(layer, "sans", "hovered", { size: "sm" }),
+                        keystroke: {
+                            ...text(layer, "sans", "hovered", {
+                                size: "sm",
+                                weight: "bold",
+                            }),
+                            padding: { left: 3, right: 3 },
+                        },
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
                 },
             },
-            active: {
-                background: background(layer, "active"),
-            },
-            activeHover: {
-                background: background(layer, "active"),
-            },
-        },
+        }),
+
         separator: {
             background: borderColor(layer),
             margin: { top: 2, bottom: 2 },

styles/src/styleTree/copilot.ts

@@ -1,60 +1,69 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
-
+import { interactive } from "../element"
 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
-        background: background(layer),
-        border: border(layer, "default"),
-        cornerRadius: 4,
-        margin: {
-            top: 4,
-            bottom: 4,
-            left: 8,
-            right: 8,
-        },
-        padding: {
-            top: 3,
-            bottom: 3,
-            left: 7,
-            right: 7,
-        },
-        ...text(layer, "sans", "default", { size: "sm" }),
-        hover: {
-            ...text(layer, "sans", "default", { size: "sm" }),
-            background: background(layer, "hovered"),
-            border: border(layer, "active"),
-        },
-    }
+        interactive({
+            base: {
+                background: background(layer),
+                border: border(layer, "default"),
+                cornerRadius: 4,
+                margin: {
+                    top: 4,
+                    bottom: 4,
+                    left: 8,
+                    right: 8,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", { size: "sm" }),
+            },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
+            },
+        })
 
     return {
-        outLinkIcon: {
-            icon: svg(
-                foreground(layer, "variant"),
-                "icons/link_out_12.svg",
-                12,
-                12
-            ),
-            container: {
-                cornerRadius: 6,
-                padding: { left: 6 },
-            },
-            hover: {
+        outLinkIcon: interactive({
+            base: {
                 icon: svg(
-                    foreground(layer, "hovered"),
+                    foreground(layer, "variant"),
                     "icons/link_out_12.svg",
                     12,
                     12
                 ),
+                container: {
+                    cornerRadius: 6,
+                    padding: { left: 6 },
+                },
             },
-        },
+            state: {
+                hovered: {
+                    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,42 +84,46 @@ export default function copilot(colorScheme: ColorScheme) {
                     bottom: 8,
                 },
             },
-            closeIcon: {
-                icon: svg(
-                    foreground(layer, "variant"),
-                    "icons/x_mark_8.svg",
-                    8,
-                    8
-                ),
-                container: {
-                    cornerRadius: 2,
-                    padding: {
-                        top: 4,
-                        bottom: 4,
-                        left: 4,
-                        right: 4,
-                    },
-                    margin: {
-                        right: 0,
-                    },
-                },
-                hover: {
+            closeIcon: interactive({
+                base: {
                     icon: svg(
-                        foreground(layer, "on"),
+                        foreground(layer, "variant"),
                         "icons/x_mark_8.svg",
                         8,
                         8
                     ),
+                    container: {
+                        cornerRadius: 2,
+                        padding: {
+                            top: 4,
+                            bottom: 4,
+                            left: 4,
+                            right: 4,
+                        },
+                        margin: {
+                            right: 0,
+                        },
+                    },
                 },
-                clicked: {
-                    icon: svg(
-                        foreground(layer, "base"),
-                        "icons/x_mark_8.svg",
-                        8,
-                        8
-                    ),
+                state: {
+                    hovered: {
+                        icon: svg(
+                            foreground(layer, "on"),
+                            "icons/x_mark_8.svg",
+                            8,
+                            8
+                        ),
+                    },
+                    clicked: {
+                        icon: svg(
+                            foreground(layer, "base"),
+                            "icons/x_mark_8.svg",
+                            8,
+                            8
+                        ),
+                    },
                 },
-            },
+            }),
             dimensions: {
                 width: 280,
                 height: 280,
@@ -185,28 +198,32 @@ export default function copilot(colorScheme: ColorScheme) {
                         },
                     },
                     right: (content_width * 1) / 3,
-                    rightContainer: {
-                        border: border(colorScheme.lowest, "inverted", {
-                            bottom: false,
-                            right: false,
-                            top: false,
-                            left: true,
-                        }),
-                        padding: {
-                            top: 3,
-                            bottom: 5,
-                            left: 8,
-                            right: 0,
-                        },
-                        hover: {
-                            border: border(layer, "active", {
+                    rightContainer: interactive({
+                        base: {
+                            border: border(colorScheme.lowest, "inverted", {
                                 bottom: false,
                                 right: false,
                                 top: false,
                                 left: true,
                             }),
+                            padding: {
+                                top: 3,
+                                bottom: 5,
+                                left: 8,
+                                right: 0,
+                            },
                         },
-                    },
+                        state: {
+                            hovered: {
+                                border: border(layer, "active", {
+                                    bottom: false,
+                                    right: false,
+                                    top: false,
+                                    left: true,
+                                }),
+                            },
+                        },
+                    }),
                 },
             },
 

styles/src/styleTree/editor.ts

@@ -4,6 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
 import { buildSyntax } from "../theme/syntax"
+import { interactive, toggleable } from "../element"
 
 export default function editor(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
@@ -48,46 +49,76 @@ export default function editor(colorScheme: ColorScheme) {
         // Inline autocomplete suggestions, Co-pilot suggestions, etc.
         suggestion: syntax.predictive,
         codeActions: {
-            indicator: {
-                color: foreground(layer, "variant"),
+            indicator: toggleable({
+                base: interactive({
+                    base: {
+                        color: foreground(layer, "variant"),
+                    },
+                    state: {
+                        hovered: {
+                            color: foreground(layer, "variant", "hovered"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "variant", "pressed"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            color: foreground(layer, "accent"),
+                        },
+                        hovered: {
+                            color: foreground(layer, "accent", "hovered"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "accent", "pressed"),
+                        },
+                    },
+                },
+            }),
 
-                clicked: {
-                    color: foreground(layer, "base"),
-                },
-                hover: {
-                    color: foreground(layer, "on"),
-                },
-                active: {
-                    color: foreground(layer, "on"),
-                },
-            },
             verticalScale: 0.55,
         },
         folds: {
             iconMarginScale: 2.5,
             foldedIcon: "icons/chevron_right_8.svg",
             foldableIcon: "icons/chevron_down_8.svg",
-            indicator: {
-                color: foreground(layer, "variant"),
-
-                clicked: {
-                    color: foreground(layer, "base"),
+            indicator: toggleable({
+                base: interactive({
+                    base: {
+                        color: foreground(layer, "variant"),
+                    },
+                    state: {
+                        hovered: {
+                            color: foreground(layer, "on"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "base"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            color: foreground(layer, "default"),
+                        },
+                        hovered: {
+                            color: foreground(layer, "variant"),
+                        },
+                    },
                 },
-                hover: {
-                    color: foreground(layer, "on"),
-                },
-                active: {
-                    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: {
+                    hovered: {
                         color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
                     },
 
@@ -223,21 +254,26 @@ export default function editor(colorScheme: ColorScheme) {
             color: syntax.linkUri.color,
             underline: syntax.linkUri.underline,
         },
-        jumpIcon: {
-            color: foreground(layer, "on"),
-            iconWidth: 20,
-            buttonWidth: 20,
-            cornerRadius: 6,
-            padding: {
-                top: 6,
-                bottom: 6,
-                left: 6,
-                right: 6,
+        jumpIcon: interactive({
+            base: {
+                color: foreground(layer, "on"),
+                iconWidth: 20,
+                buttonWidth: 20,
+                cornerRadius: 6,
+                padding: {
+                    top: 6,
+                    bottom: 6,
+                    left: 6,
+                    right: 6,
+                },
             },
-            hover: {
-                background: background(layer, "on", "hovered"),
+            state: {
+                hovered: {
+                    background: background(layer, "on", "hovered"),
+                },
             },
-        },
+        }),
+
         scrollbar: {
             width: 12,
             minHeightFactor: 1.0,

styles/src/styleTree/feedback.ts

@@ -1,35 +1,40 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
+import { interactive } from "../element"
 
 export default function feedback(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
 
     return {
-        submit_button: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
+        submit_button: interactive({
+            base: {
+                ...text(layer, "mono", "on"),
+                background: background(layer, "on"),
+                cornerRadius: 6,
+                border: border(layer, "on"),
+                margin: {
+                    right: 4,
+                },
+                padding: {
+                    bottom: 2,
+                    left: 10,
+                    right: 10,
+                    top: 2,
+                },
             },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
+            state: {
+                clicked: {
+                    ...text(layer, "mono", "on", "pressed"),
+                    background: background(layer, "on", "pressed"),
+                    border: border(layer, "on", "pressed"),
+                },
+                hovered: {
+                    ...text(layer, "mono", "on", "hovered"),
+                    background: background(layer, "on", "hovered"),
+                    border: border(layer, "on", "hovered"),
+                },
             },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
-            },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
-        },
+        }),
         button_margin: 8,
         info_text_default: text(layer, "sans", "default", { size: "xs" }),
         link_text_default: text(layer, "sans", "default", {

styles/src/styleTree/picker.ts

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function picker(colorScheme: ColorScheme): any {
     let layer = colorScheme.lowest
@@ -38,35 +39,65 @@ export default function picker(colorScheme: ColorScheme): any {
             ...container,
             padding: {},
         },
-        item: {
-            padding: {
-                bottom: 4,
-                left: 12,
-                right: 12,
-                top: 4,
+        item: toggleable({
+            base: interactive({
+                base: {
+                    padding: {
+                        bottom: 4,
+                        left: 12,
+                        right: 12,
+                        top: 4,
+                    },
+                    margin: {
+                        top: 1,
+                        left: 4,
+                        right: 4,
+                    },
+                    cornerRadius: 8,
+                    text: text(layer, "sans", "variant"),
+                    highlightText: text(layer, "sans", "accent", {
+                        weight: "bold",
+                    }),
+                },
+                state: {
+                    hovered: {
+                        background: withOpacity(
+                            background(layer, "hovered"),
+                            0.5
+                        ),
+                    },
+                    clicked: {
+                        background: withOpacity(
+                            background(layer, "pressed"),
+                            0.5
+                        ),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        background: withOpacity(
+                            background(layer, "base", "active"),
+                            0.5
+                        ),
+                    },
+                    hovered: {
+                        background: withOpacity(
+                            background(layer, "hovered"),
+                            0.5
+                        ),
+                    },
+                    clicked: {
+                        background: withOpacity(
+                            background(layer, "pressed"),
+                            0.5
+                        ),
+                    },
+                },
             },
-            margin: {
-                top: 1,
-                left: 4,
-                right: 4,
-            },
-            cornerRadius: 8,
-            text: text(layer, "sans", "variant"),
-            highlightText: text(layer, "sans", "accent", { weight: "bold" }),
-            active: {
-                background: withOpacity(
-                    background(layer, "base", "active"),
-                    0.5
-                ),
-                text: text(layer, "sans", "base", "active"),
-                highlightText: text(layer, "sans", "accent", {
-                    weight: "bold",
-                }),
-            },
-            hover: {
-                background: withOpacity(background(layer, "hovered"), 0.5),
-            },
-        },
+        }),
+
         inputEditor,
         emptyInputEditor,
         noMatches: {

styles/src/styleTree/projectPanel.ts

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function projectPanel(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
 
@@ -28,48 +28,79 @@ export default function projectPanel(colorScheme: ColorScheme) {
         },
     }
 
-    let entry = {
-        ...baseEntry,
-        text: text(layer, "mono", "variant", { size: "sm" }),
-        hover: {
-            background: background(layer, "variant", "hovered"),
+    const default_entry = interactive({
+        base: {
+            ...baseEntry,
+            text: text(layer, "mono", "variant", { size: "sm" }),
+            status,
         },
-        active: {
-            background: colorScheme.isLight
-                ? withOpacity(background(layer, "active"), 0.5)
-                : background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
+        state: {
+            default: {
+                background: background(layer),
+            },
+            hovered: {
+                background: background(layer, "variant", "hovered"),
+            },
+            clicked: {
+                background: background(layer, "variant", "pressed"),
+            },
         },
-        activeHover: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
+    })
+
+    let entry = toggleable({
+        base: default_entry,
+        state: {
+            active: interactive({
+                base: {
+                    ...default_entry,
+                },
+                state: {
+                    default: {
+                        background: background(colorScheme.lowest),
+                    },
+                    hovered: {
+                        background: background(colorScheme.lowest, "hovered"),
+                    },
+                    clicked: {
+                        background: background(colorScheme.lowest, "pressed"),
+                    },
+                },
+            }),
         },
-        status,
-    }
+    })
 
     return {
-        openProjectButton: {
-            background: background(layer),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            margin: {
-                top: 16,
-                left: 16,
-                right: 16,
-            },
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "default", { size: "sm" }),
-            hover: {
-                ...text(layer, "sans", "default", { size: "sm" }),
-                background: background(layer, "hovered"),
+        openProjectButton: interactive({
+            base: {
+                background: background(layer),
                 border: border(layer, "active"),
+                cornerRadius: 4,
+                margin: {
+                    top: 16,
+                    left: 16,
+                    right: 16,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", { size: "sm" }),
             },
-        },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
+                clicked: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "pressed"),
+                    border: border(layer, "active"),
+                },
+            },
+        }),
         background: background(layer),
         padding: { left: 6, right: 6, top: 0, bottom: 6 },
         indentWidth: 12,
@@ -94,8 +125,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
             ...entry,
             text: text(layer, "mono", "disabled"),
             active: {
-                background: background(layer, "active"),
-                text: text(layer, "mono", "disabled", { size: "sm" }),
+                ...entry.active,
+                default: {
+                    ...entry.active.default,
+                    background: background(layer, "active"),
+                    text: text(layer, "mono", "disabled", { size: "sm" }),
+                },
             },
         },
         filenameEditor: {

styles/src/styleTree/search.ts

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function search(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -35,36 +36,50 @@ export default function search(colorScheme: ColorScheme) {
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
         matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-        optionButton: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
+        optionButton: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "mono", "on"),
+                    background: background(layer, "on"),
+                    cornerRadius: 6,
+                    border: border(layer, "on"),
+                    margin: {
+                        right: 4,
+                    },
+                    padding: {
+                        bottom: 2,
+                        left: 10,
+                        right: 10,
+                        top: 2,
+                    },
+                },
+                state: {
+                    hovered: {
+                        ...text(layer, "mono", "on", "hovered"),
+                        background: background(layer, "on", "hovered"),
+                        border: border(layer, "on", "hovered"),
+                    },
+                    clicked: {
+                        ...text(layer, "mono", "on", "pressed"),
+                        background: background(layer, "on", "pressed"),
+                        border: border(layer, "on", "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(layer, "mono", "accent"),
+                    },
+                    hovered: {
+                        ...text(layer, "mono", "accent", "hovered"),
+                    },
+                    clicked: {
+                        ...text(layer, "mono", "accent", "pressed"),
+                    },
+                },
             },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
-            },
-            active: {
-                ...text(layer, "mono", "on", "inverted"),
-                background: background(layer, "on", "inverted"),
-                border: border(layer, "on", "inverted"),
-            },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
-            },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
-        },
+        }),
         editor,
         invalidEditor: {
             ...editor,
@@ -97,17 +112,24 @@ export default function search(colorScheme: ColorScheme) {
             ...text(layer, "mono", "on"),
             size: 18,
         },
-        dismissButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 12,
-            buttonWidth: 14,
-            padding: {
-                left: 10,
-                right: 10,
+        dismissButton: interactive({
+            base: {
+                color: foreground(layer, "variant"),
+                iconWidth: 12,
+                buttonWidth: 14,
+                padding: {
+                    left: 10,
+                    right: 10,
+                },
             },
-            hover: {
-                color: foreground(layer, "hovered"),
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
+                clicked: {
+                    color: foreground(layer, "pressed"),
+                },
             },
-        },
+        }),
     }
 }

styles/src/styleTree/simpleMessageNotification.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
+import { interactive } from "../element"
 
 const headerPadding = 8
 
@@ -12,33 +13,41 @@ export default function simpleMessageNotification(
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: headerPadding, right: headerPadding },
         },
-        actionMessage: {
-            ...text(layer, "sans", { size: "xs" }),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-
-            margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
-                ...text(layer, "sans", "default", { size: "xs" }),
-                background: background(layer, "hovered"),
+        actionMessage: interactive({
+            base: {
+                ...text(layer, "sans", { size: "xs" }),
                 border: border(layer, "active"),
+                cornerRadius: 4,
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+
+                margin: { left: headerPadding, top: 6, bottom: 6 },
             },
-        },
-        dismissButton: {
-            color: foreground(layer),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", { size: "xs" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
             },
-        },
+        }),
+        dismissButton: interactive({
+            base: {
+                color: foreground(layer),
+                iconWidth: 8,
+                iconHeight: 8,
+                buttonWidth: 8,
+                buttonHeight: 8,
+            },
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
+            },
+        }),
     }
 }

styles/src/styleTree/statusBar.ts

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function statusBar(colorScheme: ColorScheme) {
     let layer = colorScheme.lowest
 
@@ -25,95 +25,123 @@ export default function statusBar(colorScheme: ColorScheme) {
         },
         border: border(layer, { top: true, overlay: true }),
         cursorPosition: text(layer, "sans", "variant"),
-        activeLanguage: {
-            padding: { left: 6, right: 6 },
-            ...text(layer, "sans", "variant"),
-            hover: {
-                ...text(layer, "sans", "on"),
+        activeLanguage: interactive({
+            base: {
+                padding: { left: 6, right: 6 },
+                ...text(layer, "sans", "variant"),
             },
-        },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "on"),
+                },
+            },
+        }),
         autoUpdateProgressMessage: text(layer, "sans", "variant"),
         autoUpdateDoneMessage: text(layer, "sans", "variant"),
-        lspStatus: {
-            ...diagnosticStatusContainer,
-            iconSpacing: 4,
-            iconWidth: 14,
-            height: 18,
-            message: text(layer, "sans"),
-            iconColor: foreground(layer),
-            hover: {
+        lspStatus: interactive({
+            base: {
+                ...diagnosticStatusContainer,
+                iconSpacing: 4,
+                iconWidth: 14,
+                height: 18,
                 message: text(layer, "sans"),
                 iconColor: foreground(layer),
-                background: background(layer, "hovered"),
             },
-        },
-        diagnosticMessage: {
-            ...text(layer, "sans"),
-            hover: text(layer, "sans", "hovered"),
-        },
-        diagnosticSummary: {
-            height: 20,
-            iconWidth: 16,
-            iconSpacing: 2,
-            summarySpacing: 6,
-            text: text(layer, "sans", { size: "sm" }),
-            iconColorOk: foreground(layer, "variant"),
-            iconColorWarning: foreground(layer, "warning"),
-            iconColorError: foreground(layer, "negative"),
-            containerOk: {
-                cornerRadius: 6,
-                padding: { top: 3, bottom: 3, left: 7, right: 7 },
+            state: {
+                hovered: {
+                    message: text(layer, "sans"),
+                    iconColor: foreground(layer),
+                    background: background(layer, "hovered"),
+                },
             },
-            containerWarning: {
-                ...diagnosticStatusContainer,
-                background: background(layer, "warning"),
-                border: border(layer, "warning"),
+        }),
+        diagnosticMessage: interactive({
+            base: {
+                ...text(layer, "sans"),
             },
-            containerError: {
-                ...diagnosticStatusContainer,
-                background: background(layer, "negative"),
-                border: border(layer, "negative"),
-            },
-            hover: {
-                iconColorOk: foreground(layer, "on"),
+            state: { hovered: text(layer, "sans", "hovered") },
+        }),
+        diagnosticSummary: interactive({
+            base: {
+                height: 20,
+                iconWidth: 16,
+                iconSpacing: 2,
+                summarySpacing: 6,
+                text: text(layer, "sans", { size: "sm" }),
+                iconColorOk: foreground(layer, "variant"),
+                iconColorWarning: foreground(layer, "warning"),
+                iconColorError: foreground(layer, "negative"),
                 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"),
+                    background: background(layer, "warning"),
+                    border: border(layer, "warning"),
                 },
                 containerError: {
                     ...diagnosticStatusContainer,
-                    background: background(layer, "negative", "hovered"),
-                    border: border(layer, "negative", "hovered"),
+                    background: background(layer, "negative"),
+                    border: border(layer, "negative"),
                 },
             },
-        },
+            state: {
+                hovered: {
+                    iconColorOk: foreground(layer, "on"),
+                    containerOk: {
+                        background: background(layer, "on", "hovered"),
+                    },
+                    containerWarning: {
+                        background: background(layer, "warning", "hovered"),
+                        border: border(layer, "warning", "hovered"),
+                    },
+                    containerError: {
+                        background: background(layer, "negative", "hovered"),
+                        border: border(layer, "negative", "hovered"),
+                    },
+                },
+            },
+        }),
         panelButtons: {
             groupLeft: {},
             groupBottom: {},
             groupRight: {},
-            button: {
-                ...statusContainer,
-                iconSize: 16,
-                iconColor: foreground(layer, "variant"),
-                label: {
-                    margin: { left: 6 },
-                    ...text(layer, "sans", { size: "sm" }),
+            button: toggleable({
+                base: interactive({
+                    base: {
+                        ...statusContainer,
+                        iconSize: 16,
+                        iconColor: foreground(layer, "variant"),
+                        label: {
+                            margin: { left: 6 },
+                            ...text(layer, "sans", { size: "sm" }),
+                        },
+                    },
+                    state: {
+                        hovered: {
+                            iconColor: foreground(layer, "hovered"),
+                            background: background(layer, "variant"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            iconColor: foreground(layer, "active"),
+                            background: background(layer, "active"),
+                        },
+                        hovered: {
+                            iconColor: foreground(layer, "hovered"),
+                            background: background(layer, "hovered"),
+                        },
+                        clicked: {
+                            iconColor: foreground(layer, "pressed"),
+                            background: background(layer, "pressed"),
+                        },
+                    },
                 },
-                hover: {
-                    iconColor: foreground(layer, "hovered"),
-                    background: background(layer, "variant"),
-                },
-                active: {
-                    iconColor: foreground(layer, "active"),
-                    background: background(layer, "active"),
-                },
-            },
+            }),
             badge: {
                 cornerRadius: 3,
                 padding: 2,

styles/src/styleTree/tabBar.ts

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function tabBar(colorScheme: ColorScheme) {
     const height = 32
@@ -87,17 +88,36 @@ export default function tabBar(colorScheme: ColorScheme) {
             inactiveTab: inactivePaneInactiveTab,
         },
         draggedTab,
-        paneButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 12,
-            buttonWidth: activePaneActiveTab.height,
-            hover: {
-                color: foreground(layer, "hovered"),
+        paneButton: toggleable({
+            base: interactive({
+                base: {
+                    color: foreground(layer, "variant"),
+                    iconWidth: 12,
+                    buttonWidth: activePaneActiveTab.height,
+                },
+                state: {
+                    hovered: {
+                        color: foreground(layer, "hovered"),
+                    },
+                    clicked: {
+                        color: foreground(layer, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        color: foreground(layer, "accent"),
+                    },
+                    hovered: {
+                        color: foreground(layer, "hovered"),
+                    },
+                    clicked: {
+                        color: foreground(layer, "pressed"),
+                    },
+                },
             },
-            active: {
-                color: foreground(layer, "accent"),
-            },
-        },
+        }),
         paneButtonContainer: {
             background: tab.background,
             border: {

styles/src/styleTree/toggle.ts

@@ -0,0 +1,47 @@
+import merge from "ts-deepmerge"
+
+type ToggleState = "inactive" | "active"
+
+type Toggleable<T> = Record<ToggleState, T>
+
+const NO_INACTIVE_OR_BASE_ERROR =
+    "A toggleable object must have an inactive state, or a base property."
+const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
+
+interface ToggleableProps<T> {
+    base?: T
+    state: Partial<Record<ToggleState, T>>
+}
+
+/**
+ * Helper function for creating Toggleable objects.
+ * @template T The type of the object being toggled.
+ * @param props Object containing the base (inactive) state and state modifications to create the active state.
+ * @returns A Toggleable object containing both the inactive and active states.
+ * @example
+ * ```
+ * toggleable({
+ *   base: { background: "#000000", text: "#CCCCCC" },
+ *   state: { active: { text: "#CCCCCC" } },
+ * })
+ * ```
+ */
+export function toggleable<T extends object>(
+    props: ToggleableProps<T>
+): Toggleable<T> {
+    const { base, state } = props
+
+    if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
+    if (!state.active) throw new Error(NO_ACTIVE_ERROR)
+
+    const inactiveState = base
+        ? ((state.inactive ? merge(base, state.inactive) : base) as T)
+        : (state.inactive as T)
+
+    const toggleObj: Toggleable<T> = {
+        inactive: inactiveState,
+        active: merge(base ?? {}, state.active) as T,
+    }
+
+    return toggleObj
+}

styles/src/styleTree/toolbarDropdownMenu.ts

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function dropdownMenu(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
@@ -9,38 +9,56 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
         background: background(layer),
         border: border(layer),
         shadow: colorScheme.popoverShadow,
-        header: {
-            ...text(layer, "sans", { size: "sm" }),
-            secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
-            secondaryTextSpacing: 10,
-            padding: { left: 8, right: 8, top: 2, bottom: 2 },
-            cornerRadius: 6,
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            hover: {
-                background: background(layer, "hovered"),
-                ...text(layer, "sans", "hovered", { size: "sm" }),
-            }
-        },
+        header: interactive({
+            base: {
+                ...text(layer, "sans", { size: "sm" }),
+                secondaryText: text(layer, "sans", {
+                    size: "sm",
+                    color: "#aaaaaa",
+                }),
+                secondaryTextSpacing: 10,
+                padding: { left: 8, right: 8, top: 2, bottom: 2 },
+                cornerRadius: 6,
+                background: background(layer, "on"),
+            },
+            state: {
+                hovered: {
+                    background: background(layer, "hovered"),
+                },
+                clicked: {
+                    background: background(layer, "pressed"),
+                },
+            },
+        }),
         sectionHeader: {
             ...text(layer, "sans", { size: "sm" }),
             padding: { left: 8, right: 8, top: 8, bottom: 8 },
         },
-        item: {
-            ...text(layer, "sans", { size: "sm" }),
-            secondaryTextSpacing: 10,
-            secondaryText: text(layer, "sans", { size: "sm" }),
-            padding: { left: 18, right: 18, top: 2, bottom: 2 },
-            hover: {
-                background: background(layer, "hovered"),
-                ...text(layer, "sans", "hovered", { size: "sm" }),
+        item: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "sans", { size: "sm" }),
+                    secondaryTextSpacing: 10,
+                    secondaryText: text(layer, "sans", { size: "sm" }),
+                    padding: { left: 18, right: 18, top: 2, bottom: 2 },
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                        ...text(layer, "sans", "hovered", { size: "sm" }),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                },
             },
-            active: {
-                background: background(layer, "active"),
-            },
-            activeHover: {
-                background: background(layer, "active"),
-            },
-        },
+        }),
     }
 }

styles/src/styleTree/updateNotification.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
+import { interactive } from "../element"
 
 const headerPadding = 8
 
@@ -10,22 +11,30 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: headerPadding, right: headerPadding },
         },
-        actionMessage: {
-            ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
-                color: foreground(layer, "hovered"),
+        actionMessage: interactive({
+            base: {
+                ...text(layer, "sans", { size: "xs" }),
+                margin: { left: headerPadding, top: 6, bottom: 6 },
             },
-        },
-        dismissButton: {
-            color: foreground(layer),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
             },
-        },
+        }),
+        dismissButton: interactive({
+            base: {
+                color: foreground(layer),
+                iconWidth: 8,
+                iconHeight: 8,
+                buttonWidth: 8,
+                buttonHeight: 8,
+            },
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
+            },
+        }),
     }
 }

styles/src/styleTree/welcome.ts

@@ -8,6 +8,7 @@ import {
     TextProperties,
     svg,
 } from "./components"
+import { interactive } from "../element"
 
 export default function welcome(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -63,27 +64,31 @@ export default function welcome(colorScheme: ColorScheme) {
                 bottom: 2,
             },
         },
-        button: {
-            background: background(layer),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            margin: {
-                top: 4,
-                bottom: 4,
-            },
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "default", interactive_text_size),
-            hover: {
-                ...text(layer, "sans", "default", interactive_text_size),
-                background: background(layer, "hovered"),
+        button: interactive({
+            base: {
+                background: background(layer),
                 border: border(layer, "active"),
+                cornerRadius: 4,
+                margin: {
+                    top: 4,
+                    bottom: 4,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", interactive_text_size),
             },
-        },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", interactive_text_size),
+                    background: background(layer, "hovered"),
+                },
+            },
+        }),
+
         usageNote: {
             ...text(layer, "sans", "variant", { size: "2xs" }),
             padding: {

styles/src/styleTree/workspace.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
+import { toggleable } from "../element"
 import {
     background,
     border,
@@ -10,38 +11,53 @@ import {
 } from "./components"
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
-
+import { interactive } from "../element"
+import merge from "ts-deepmerge"
 export default function workspace(colorScheme: ColorScheme) {
     const layer = colorScheme.lowest
     const isLight = colorScheme.isLight
     const itemSpacing = 8
-    const titlebarButton = {
-        cornerRadius: 6,
-        padding: {
-            top: 1,
-            bottom: 1,
-            left: 8,
-            right: 8,
+    const titlebarButton = toggleable({
+        base: interactive({
+            base: {
+                cornerRadius: 6,
+                padding: {
+                    top: 1,
+                    bottom: 1,
+                    left: 8,
+                    right: 8,
+                },
+                ...text(layer, "sans", "variant", { size: "xs" }),
+                background: background(layer, "variant"),
+                border: border(layer),
+            },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "variant", "hovered", {
+                        size: "xs",
+                    }),
+                    background: background(layer, "variant", "hovered"),
+                    border: border(layer, "variant", "hovered"),
+                },
+                clicked: {
+                    ...text(layer, "sans", "variant", "pressed", {
+                        size: "xs",
+                    }),
+                    background: background(layer, "variant", "pressed"),
+                    border: border(layer, "variant", "pressed"),
+                },
+            },
+        }),
+        state: {
+            active: {
+                default: {
+                    ...text(layer, "sans", "variant", "active", { size: "xs" }),
+                    background: background(layer, "variant", "active"),
+                    border: border(layer, "variant", "active"),
+                },
+            },
         },
-        ...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"),
-            border: border(layer, "variant", "hovered"),
-        },
-        clicked: {
-            ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
-            background: background(layer, "variant", "pressed"),
-            border: border(layer, "variant", "pressed"),
-        },
-        active: {
-            ...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,19 +94,24 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
                 cornerRadius: 4,
             },
-            keyboardHint: {
-                ...text(layer, "sans", "variant", { size: "sm" }),
-                padding: {
-                    top: 3,
-                    left: 8,
-                    right: 8,
-                    bottom: 3,
+            keyboardHint: interactive({
+                base: {
+                    ...text(layer, "sans", "variant", { size: "sm" }),
+                    padding: {
+                        top: 3,
+                        left: 8,
+                        right: 8,
+                        bottom: 3,
+                    },
+                    cornerRadius: 8,
                 },
-                cornerRadius: 8,
-                hover: {
-                    ...text(layer, "sans", "active", { size: "sm" }),
+                state: {
+                    hovered: {
+                        ...text(layer, "sans", "active", { size: "sm" }),
+                    },
                 },
-            },
+            }),
+
             keyboardHintWidth: 320,
         },
         joiningProjectAvatar: {
@@ -201,12 +222,15 @@ export default function workspace(colorScheme: ColorScheme) {
 
             // Sign in buttom
             // FlatButton, Variant
-            signInPrompt: {
-                margin: {
-                    left: itemSpacing,
+            signInPrompt: merge(titlebarButton, {
+                inactive: {
+                    default: {
+                        margin: {
+                            left: itemSpacing,
+                        },
+                    },
                 },
-                ...titlebarButton,
-            },
+            }),
 
             // Offline Indicator
             offlineIcon: {
@@ -234,40 +258,68 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
                 cornerRadius: 6,
             },
-            callControl: {
-                cornerRadius: 6,
-                color: foreground(layer, "variant"),
-                iconWidth: 12,
-                buttonWidth: 20,
-                hover: {
-                    background: background(layer, "variant", "hovered"),
-                    color: foreground(layer, "variant", "hovered"),
+            callControl: interactive({
+                base: {
+                    cornerRadius: 6,
+                    color: foreground(layer, "variant"),
+                    iconWidth: 12,
+                    buttonWidth: 20,
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "variant", "hovered"),
+                        color: foreground(layer, "variant", "hovered"),
+                    },
+                },
+            }),
+            toggleContactsButton: toggleable({
+                base: interactive({
+                    base: {
+                        margin: { left: itemSpacing },
+                        cornerRadius: 6,
+                        color: foreground(layer, "variant"),
+                        iconWidth: 14,
+                        buttonWidth: 20,
+                    },
+                    state: {
+                        clicked: {
+                            background: background(layer, "variant", "pressed"),
+                        },
+                        hovered: {
+                            background: background(layer, "variant", "hovered"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            background: background(layer, "on", "default"),
+                        },
+                        hovered: {
+                            background: background(layer, "on", "hovered"),
+                        },
+                        clicked: {
+                            background: background(layer, "on", "pressed"),
+                        },
+                    },
+                },
+            }),
+            userMenuButton: merge(titlebarButton, {
+                inactive: {
+                    default: {
+                        buttonWidth: 20,
+                        iconWidth: 12,
+                    },
                 },
-            },
-            toggleContactsButton: {
-                margin: { left: itemSpacing },
-                cornerRadius: 6,
-                color: foreground(layer, "variant"),
-                iconWidth: 14,
-                buttonWidth: 20,
                 active: {
-                    background: background(layer, "variant", "active"),
-                    color: foreground(layer, "variant", "active"),
+                    // posiewic: these properties are not currently set on main
+                    default: {
+                        iconWidth: 12,
+                        button_width: 20,
+                    },
                 },
-                clicked: {
-                    background: background(layer, "variant", "pressed"),
-                    color: foreground(layer, "variant", "pressed"),
-                },
-                hover: {
-                    background: background(layer, "variant", "hovered"),
-                    color: foreground(layer, "variant", "hovered"),
-                },
-            },
-            userMenuButton: {
-                buttonWidth: 20,
-                iconWidth: 12,
-                ...titlebarButton,
-            },
+            }),
+
             toggleContactsBadge: {
                 cornerRadius: 3,
                 padding: 2,
@@ -285,12 +337,45 @@ export default function workspace(colorScheme: ColorScheme) {
             background: background(colorScheme.highest),
             border: border(colorScheme.highest, { bottom: true }),
             itemSpacing: 8,
-            navButton: {
-                color: foreground(colorScheme.highest, "on"),
-                iconWidth: 12,
-                buttonWidth: 24,
+            navButton: interactive({
+                base: {
+                    color: foreground(colorScheme.highest, "on"),
+                    iconWidth: 12,
+                    buttonWidth: 24,
+                    cornerRadius: 6,
+                },
+                state: {
+                    hovered: {
+                        color: foreground(colorScheme.highest, "on", "hovered"),
+                        background: background(
+                            colorScheme.highest,
+                            "on",
+                            "hovered"
+                        ),
+                    },
+                    disabled: {
+                        color: foreground(
+                            colorScheme.highest,
+                            "on",
+                            "disabled"
+                        ),
+                    },
+                },
+            }),
+            padding: { left: 8, right: 8, top: 4, bottom: 4 },
+        },
+        breadcrumbHeight: 24,
+        breadcrumbs: interactive({
+            base: {
+                ...text(colorScheme.highest, "sans", "variant"),
                 cornerRadius: 6,
-                hover: {
+                padding: {
+                    left: 6,
+                    right: 6,
+                },
+            },
+            state: {
+                hovered: {
                     color: foreground(colorScheme.highest, "on", "hovered"),
                     background: background(
                         colorScheme.highest,
@@ -298,25 +383,8 @@ export default function workspace(colorScheme: ColorScheme) {
                         "hovered"
                     ),
                 },
-                disabled: {
-                    color: foreground(colorScheme.highest, "on", "disabled"),
-                },
             },
-            padding: { left: 8, right: 8, top: 4, bottom: 4 },
-        },
-        breadcrumbHeight: 24,
-        breadcrumbs: {
-            ...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),

styles/src/theme/tokens/colorScheme.ts

@@ -1,9 +1,19 @@
-import { SingleBoxShadowToken, SingleColorToken, SingleOtherToken, TokenTypes } from "@tokens-studio/types"
-import { ColorScheme, Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../colorScheme"
+import {
+    SingleBoxShadowToken,
+    SingleColorToken,
+    SingleOtherToken,
+    TokenTypes,
+} from "@tokens-studio/types"
+import {
+    ColorScheme,
+    Shadow,
+    SyntaxHighlightStyle,
+    ThemeSyntax,
+} from "../colorScheme"
 import { LayerToken, layerToken } from "./layer"
 import { PlayersToken, playersToken } from "./players"
 import { colorToken } from "./token"
-import { Syntax } from "../syntax";
+import { Syntax } from "../syntax"
 import editor from "../../styleTree/editor"
 
 interface ColorSchemeTokens {
@@ -18,27 +28,32 @@ interface ColorSchemeTokens {
     syntax?: Partial<ThemeSyntaxColorTokens>
 }
 
-const createShadowToken = (shadow: Shadow, tokenName: string): SingleBoxShadowToken => {
+const createShadowToken = (
+    shadow: Shadow,
+    tokenName: string
+): SingleBoxShadowToken => {
     return {
         name: tokenName,
         type: TokenTypes.BOX_SHADOW,
-        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`
-    };
-};
+        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`,
+    }
+}
 
 const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
-    const shadow = colorScheme.popoverShadow;
-    return createShadowToken(shadow, "popoverShadow");
-};
+    const shadow = colorScheme.popoverShadow
+    return createShadowToken(shadow, "popoverShadow")
+}
 
 const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
-    const shadow = colorScheme.modalShadow;
-    return createShadowToken(shadow, "modalShadow");
-};
+    const shadow = colorScheme.modalShadow
+    return createShadowToken(shadow, "modalShadow")
+}
 
 type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
 
-function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens {
+function syntaxHighlightStyleColorTokens(
+    syntax: Syntax
+): ThemeSyntaxColorTokens {
     const styleKeys = Object.keys(syntax) as (keyof Syntax)[]
 
     return styleKeys.reduce((acc, styleKey) => {
@@ -46,13 +61,16 @@ function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens
         // This can happen because we have a "constructor" property on the syntax object
         // and a "constructor" property on the prototype of the syntax object
         // To work around this just assert that the type of the style is not a function
-        if (!syntax[styleKey] || typeof syntax[styleKey] === 'function') return acc;
-        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>;
-        return { ...acc, [styleKey]: colorToken(styleKey, color) };
-    }, {} as ThemeSyntaxColorTokens);
+        if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
+            return acc
+        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
+        return { ...acc, [styleKey]: colorToken(styleKey, color) }
+    }, {} as ThemeSyntaxColorTokens)
 }
 
-const syntaxTokens = (colorScheme: ColorScheme): ColorSchemeTokens['syntax'] => {
+const syntaxTokens = (
+    colorScheme: ColorScheme
+): ColorSchemeTokens["syntax"] => {
     const syntax = editor(colorScheme).syntax
 
     return syntaxHighlightStyleColorTokens(syntax)

styles/src/theme/tokens/layer.ts

@@ -1,11 +1,11 @@
-import { SingleColorToken } from "@tokens-studio/types";
-import { Layer, Style, StyleSet } from "../colorScheme";
-import { colorToken } from "./token";
+import { SingleColorToken } from "@tokens-studio/types"
+import { Layer, Style, StyleSet } from "../colorScheme"
+import { colorToken } from "./token"
 
 interface StyleToken {
-    background: SingleColorToken,
-    border: SingleColorToken,
-    foreground: SingleColorToken,
+    background: SingleColorToken
+    border: SingleColorToken
+    foreground: SingleColorToken
 }
 
 interface StyleSetToken {
@@ -37,24 +37,27 @@ export const styleToken = (style: Style, name: string): StyleToken => {
     return token
 }
 
-export const styleSetToken = (styleSet: StyleSet, name: string): StyleSetToken => {
-    const token: StyleSetToken = {} as StyleSetToken;
+export const styleSetToken = (
+    styleSet: StyleSet,
+    name: string
+): StyleSetToken => {
+    const token: StyleSetToken = {} as StyleSetToken
 
     for (const style in styleSet) {
-        const s = style as keyof StyleSet;
-        token[s] = styleToken(styleSet[s], `${name}${style}`);
+        const s = style as keyof StyleSet
+        token[s] = styleToken(styleSet[s], `${name}${style}`)
     }
 
-    return token;
+    return token
 }
 
 export const layerToken = (layer: Layer, name: string): LayerToken => {
-    const token: LayerToken = {} as LayerToken;
+    const token: LayerToken = {} as LayerToken
 
     for (const styleSet in layer) {
-        const s = styleSet as keyof Layer;
-        token[s] = styleSetToken(layer[s], `${name}${styleSet}`);
+        const s = styleSet as keyof Layer
+        token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
     }
 
-    return token;
+    return token
 }

styles/src/theme/tokens/players.ts

@@ -6,13 +6,21 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
 
 export type PlayersToken = Record<keyof Players, PlayerToken>
 
-function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken {
-
+function buildPlayerToken(
+    colorScheme: ColorScheme,
+    index: number
+): PlayerToken {
     const playerNumber = index.toString() as keyof Players
 
     return {
-        selection: colorToken(`player${index}Selection`, colorScheme.players[playerNumber].selection),
-        cursor: colorToken(`player${index}Cursor`, colorScheme.players[playerNumber].cursor),
+        selection: colorToken(
+            `player${index}Selection`,
+            colorScheme.players[playerNumber].selection
+        ),
+        cursor: colorToken(
+            `player${index}Cursor`,
+            colorScheme.players[playerNumber].cursor
+        ),
     }
 }
 
@@ -24,5 +32,5 @@ export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
     "4": buildPlayerToken(colorScheme, 4),
     "5": buildPlayerToken(colorScheme, 5),
     "6": buildPlayerToken(colorScheme, 6),
-    "7": buildPlayerToken(colorScheme, 7)
+    "7": buildPlayerToken(colorScheme, 7),
 })

styles/src/theme/tokens/token.ts

@@ -1,6 +1,10 @@
 import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
 
-export function colorToken(name: string, value: string, description?: string): SingleColorToken {
+export function colorToken(
+    name: string,
+    value: string,
+    description?: string
+): SingleColorToken {
     const token: SingleColorToken = {
         name,
         type: TokenTypes.COLOR,
@@ -8,7 +12,8 @@ export function colorToken(name: string, value: string, description?: string): S
         description,
     }
 
-    if (!token.value || token.value === '') throw new Error("Color token must have a value")
+    if (!token.value || token.value === "")
+        throw new Error("Color token must have a value")
 
     return token
 }

styles/src/utils/slugify.ts

@@ -1 +1,10 @@
-export function slugify(t: string): string { return t.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '') }
+export function slugify(t: string): string {
+    return t
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^\w\-]+/g, "")
+        .replace(/\-\-+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "")
+}