From 63630949ba96ef6b0b36aafad7558d31774e92b1 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 21:58:08 +0200 Subject: [PATCH] Fix up uses of interactive --- styles/src/styleTree/commandPalette.ts | 32 ++-- styles/src/styleTree/contactList.ts | 79 +++++----- styles/src/styleTree/contactNotification.ts | 20 +-- styles/src/styleTree/contextMenu.ts | 40 ++--- styles/src/styleTree/copilot.ts | 112 ++++++------- styles/src/styleTree/editor.ts | 64 ++++---- styles/src/styleTree/picker.ts | 37 +++-- styles/src/styleTree/projectPanel.ts | 58 +++---- styles/src/styleTree/statusBar.ts | 128 ++++++++------- styles/src/styleTree/tabBar.ts | 16 +- styles/src/styleTree/welcome.ts | 38 ++--- styles/src/styleTree/workspace.ts | 164 +++++++++++--------- 12 files changed, 425 insertions(+), 363 deletions(-) diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 5fe7b74f92..d6cb196770 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -10,21 +10,23 @@ export default function commandPalette(colorScheme: ColorScheme) { keystrokeSpacing: 8, key: toggleable(interactive({ - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, { hover: { cornerRadius: 4, padding: { top: 17 } } }), { + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } } + }), { default: { text: text(layer, "mono", "on", "default", { size: "xs" }), background: withOpacity(background(layer, "on"), 0.2), diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index b3e30f4aa7..5837720401 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -73,14 +73,17 @@ export default function contactsPanel(colorScheme: ColorScheme) { rowHeight: 28, sectionIconSize: 8, headerRow: toggleable(interactive({ - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - background: background(layer, "default"),// posiewic: breaking change - }, {}), + 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, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. + }), { default: { ...text(layer, "mono", "active", { size: "sm" }), @@ -88,27 +91,30 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, }), leaveCall: interactive({ - 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" }), - }, - { - hover: { + 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" }), + } + , + state: { + hovered: { ...text(layer, "sans", "hovered", { size: "xs" }), background: background(layer, "hovered"), border: border(layer, "hovered"), } } + } ), contactRow: { inactive: { @@ -153,13 +159,14 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, }, contactButtonSpacing: nameMargin, - contactButton: interactive( - contactButton, - { - hover: { + contactButton: interactive({ + base: { ...contactButton }, + state: { + hovered: { background: background(layer, "hovered"), }, - }), + } + }), disabledButton: { ...contactButton, background: background(layer, "on"), @@ -169,14 +176,16 @@ export default function contactsPanel(colorScheme: ColorScheme) { ...text(layer, "mono", "variant", { size: "xs" }), }, treeBranch: toggleable(interactive({ - color: borderColor(layer), - width: 1, - }, - { - hover: { + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { color: borderColor(layer), }, - }), + } + }), { default: { color: borderColor(layer), diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index edef8dac20..5b29e15e6b 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -23,18 +23,20 @@ export default function contactNotification(colorScheme: ColorScheme): Object { }, button: interactive({ - ...text(layer, "sans", "on", { size: "xs" }), - background: background(layer, "on"), - padding: 4, - cornerRadius: 6, - margin: { left: 6 } - }, + base: { + ...text(layer, "sans", "on", { size: "xs" }), + background: background(layer, "on"), + padding: 4, + cornerRadius: 6, + margin: { left: 6 } + }, - { - hover: { + state: { + hovered: { background: background(layer, "on", "hovered"), } - }), + } + }), dismissButton: { default: { diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index b030d27972..2d5e84dcf0 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -13,35 +13,37 @@ export default function contextMenu(colorScheme: ColorScheme) { border: border(layer), keystrokeMargin: 30, item: toggleable(interactive({ - 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" }), + 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", "hovered", { + ...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 }, + }, + } } }), { default: { background: background(layer, "active"), }, - hover: { + hovered: { background: background(layer, "active"), }, }), diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 090d05eaee..6440941e64 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -9,53 +9,57 @@ export default function copilot(colorScheme: ColorScheme) { let ctaButton = // Copied from welcome screen. FIXME: Move this into a ZDS component interactive({ - background: background(layer), - border: border(layer, "default"), - cornerRadius: 4, - margin: { - top: 4, - bottom: 4, - left: 8, - right: 8, + 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" }) }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, - }, - ...text(layer, "sans", "default", { size: "sm" }) - }, - { - hover: { + state: { + hovered: { ...text(layer, "sans", "default", { size: "sm" }), background: background(layer, "hovered"), border: border(layer, "active"), }, - }); + } + }); return { outLinkIcon: interactive({ - icon: svg( - foreground(layer, "variant"), - "icons/link_out_12.svg", - 12, - 12 - ), - container: { - cornerRadius: 6, - padding: { left: 6 }, + base: { + icon: svg( + foreground(layer, "variant"), + "icons/link_out_12.svg", + 12, + 12 + ), + container: { + cornerRadius: 6, + padding: { left: 6 }, + }, }, - }, - { - hover: { + state: { + hovered: { icon: { color: foreground(layer, "hovered") } }, - }), + } + }), modal: { titleText: { @@ -82,7 +86,8 @@ export default function copilot(colorScheme: ColorScheme) { bottom: 8, }, }, - closeIcon: interactive( + closeIcon: interactive({ + base: { icon: svg( foreground(layer, "variant"), @@ -103,8 +108,8 @@ export default function copilot(colorScheme: ColorScheme) { }, } }, - { - hover: { + state: { + hovered: { icon: svg( foreground(layer, "on"), "icons/x_mark_8.svg", @@ -120,7 +125,8 @@ export default function copilot(colorScheme: ColorScheme) { 8 ), }, - }), + } + }), dimensions: { width: 280, height: 280, @@ -196,27 +202,29 @@ export default function copilot(colorScheme: ColorScheme) { }, right: (content_width * 1) / 3, rightContainer: interactive({ - 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", { + 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, + }), + }, + } }) }, }, diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index ac7447de42..b3b22f3c8b 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -51,14 +51,16 @@ export default function editor(colorScheme: ColorScheme) { suggestion: syntax.predictive, codeActions: { indicator: toggleable(interactive({ - color: foreground(layer, "variant"), - }, { - clicked: { - color: foreground(layer, "base"), - }, - hover: { - color: foreground(layer, "on"), - }, + base: { + color: foreground(layer, "variant"), + }, state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + } }), { default: { @@ -73,14 +75,16 @@ export default function editor(colorScheme: ColorScheme) { foldedIcon: "icons/chevron_right_8.svg", foldableIcon: "icons/chevron_down_8.svg", indicator: toggleable(interactive({ - color: foreground(layer, "variant"), - }, { - clicked: { - color: foreground(layer, "base"), - }, - hover: { - color: foreground(layer, "on"), - }, + base: { + color: foreground(layer, "variant"), + }, state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + } }), { default: { @@ -231,19 +235,21 @@ export default function editor(colorScheme: ColorScheme) { underline: syntax.linkUri.underline, }, jumpIcon: interactive({ - 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"), + base: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + } + }, state: { + hovered: { + background: background(layer, "on", "hovered"), + } } }), diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index ecf34a9927..89b6cd0614 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -41,23 +41,26 @@ export default function picker(colorScheme: ColorScheme): any { padding: {}, }, item: toggleable(interactive({ - 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" }), - }, { - hover: { - background: withOpacity(background(layer, "hovered"), 0.5), + 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), + } } }), { diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 57abd0dafc..782c781156 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -30,15 +30,17 @@ export default function projectPanel(colorScheme: ColorScheme) { } let entry = toggleable(interactive({ - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, - }, + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, state: { - hover: { + hovered: { background: background(layer, "variant", "hovered"), } - }), + } + }), { default: { /*background: colorScheme.isLight @@ -46,7 +48,7 @@ export default function projectPanel(colorScheme: ColorScheme) { : background(layer, "active") ,*/ // todo posiewic text: text(layer, "mono", "active", { size: "sm" }), }, - hover: { + hovered: { //background: background(layer, "active"), text: text(layer, "mono", "active", { size: "sm" }), }, @@ -55,27 +57,29 @@ export default function projectPanel(colorScheme: ColorScheme) { return { openProjectButton: interactive({ - 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"), + 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"), + }, + } }), background: background(layer), padding: { left: 6, right: 6, top: 0, bottom: 6 }, diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 66643dbde1..754703c2b9 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -27,74 +27,82 @@ export default function statusBar(colorScheme: ColorScheme) { border: border(layer, { top: true, overlay: true }), cursorPosition: text(layer, "sans", "variant"), activeLanguage: interactive({ - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant") - }, - { - hover: { + 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: interactive({ - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer) - }, - { - hover: { + base: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer) + }, + state: { + hovered: { message: text(layer, "sans"), iconColor: foreground(layer), background: background(layer, "hovered"), } - }), + } + }), diagnosticMessage: interactive({ - ...text(layer, "sans") + base: { + ...text(layer, "sans") + }, + state: { hovered: text(layer, "sans", "hovered") } }, - { hover: text(layer, "sans", "hovered") }, ), diagnosticSummary: interactive({ - 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 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - } - }, { - hover: { - iconColorOk: foreground(layer, "on"), + 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: { - background: background(layer, "on", "hovered"), + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, }, containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), }, containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), + ...diagnosticStatusContainer, + 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"), + } } } } @@ -104,17 +112,19 @@ export default function statusBar(colorScheme: ColorScheme) { groupBottom: {}, groupRight: {}, button: toggleable(interactive({ - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, - }, { - hover: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), + 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"), + } } }), { diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 6799b0a9e3..9da63b9518 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -90,15 +90,17 @@ export default function tabBar(colorScheme: ColorScheme) { }, draggedTab, paneButton: toggleable(interactive({ - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - { - hover: { + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { color: foreground(layer, "hovered"), } - }), + } + }), { default: { color: foreground(layer, "accent"), diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index dbabc55383..7ba7b30430 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -65,24 +65,26 @@ export default function welcome(colorScheme: ColorScheme) { }, }, button: interactive({ - 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"), + 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"), + } } }), diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 18341fc51e..fcada68a28 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -18,26 +18,28 @@ export default function workspace(colorScheme: ColorScheme) { const isLight = colorScheme.isLight const itemSpacing = 8 const titlebarButton = toggleable(interactive({ - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...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"), + 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"), + } } }), { @@ -86,17 +88,19 @@ export default function workspace(colorScheme: ColorScheme) { }, keyboardHint: interactive({ - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8 - }, { - hover: { - ...text(layer, "sans", "active", { size: "sm" }), + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8 + }, state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + } } }), @@ -250,33 +254,37 @@ export default function workspace(colorScheme: ColorScheme) { cornerRadius: 6, }, callControl: interactive({ - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - }, { - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, + 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(interactive({ - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, - }, - { + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { clicked: { background: background(layer, "variant", "pressed"), color: foreground(layer, "variant", "pressed"), }, - hover: { + hovered: { background: background(layer, "variant", "hovered"), color: foreground(layer, "variant", "hovered"), } - }), + } + }), { default: { background: background(layer, "variant", "active"), @@ -318,38 +326,42 @@ export default function workspace(colorScheme: ColorScheme) { itemSpacing: 8, navButton: interactive( { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - }, { - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), - }, - }), + 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({ - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, + base: { + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + } + }, state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background(colorScheme.highest, "on", "hovered"), + }, } - }, { - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background(colorScheme.highest, "on", "hovered"), - }, }), disconnectedOverlay: { ...text(layer, "sans"),