From ed8bdd186e9515e648a83d3448e7c9805cb3d2eb Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 13:56:27 -0400 Subject: [PATCH] Update toggle active styles --- styles/src/styleTree/contactList.ts | 13 ++++- styles/src/styleTree/contextMenu.ts | 8 ++- styles/src/styleTree/editor.ts | 27 +++++++---- styles/src/styleTree/picker.ts | 19 +++++++- styles/src/styleTree/projectPanel.ts | 54 +++++++++++++-------- styles/src/styleTree/search.ts | 23 ++++++--- styles/src/styleTree/tabBar.ts | 9 ++++ styles/src/styleTree/toolbarDropdownMenu.ts | 9 ++-- styles/src/styleTree/workspace.ts | 11 +++-- 9 files changed, 126 insertions(+), 47 deletions(-) diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 57034109f1..cee17219c8 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -83,7 +83,12 @@ export default function contactsPanel(colorScheme: ColorScheme) { background: background(layer, "default"), // posiewic: breaking change }, state: { - hovered: { background: background(layer, "default") }, + 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: { @@ -92,6 +97,12 @@ export default function contactsPanel(colorScheme: ColorScheme) { ...text(layer, "mono", "active", { size: "sm" }), background: background(layer, "active"), }, + hovered: { + background: background(layer, "hovered"), + }, + clicked: { + background: background(layer, "pressed"), + } } } }), diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 7b2b9be6c2..a217018c97 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -40,6 +40,9 @@ export default function contextMenu(colorScheme: ColorScheme) { padding: { left: 3, right: 3 }, }, }, + clicked: { + background: background(layer, "pressed"), + }, }, }), state: { @@ -48,7 +51,10 @@ export default function contextMenu(colorScheme: ColorScheme) { background: background(layer, "active"), }, hovered: { - background: background(layer, "active"), + background: background(layer, "hovered"), + }, + clicked: { + background: background(layer, "pressed"), }, } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index b02366192a..62792f6feb 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -56,18 +56,24 @@ export default function editor(colorScheme: ColorScheme) { color: foreground(layer, "variant"), }, state: { - clicked: { - color: foreground(layer, "base"), - }, hovered: { - color: foreground(layer, "on"), + color: foreground(layer, "variant", "hovered"), + }, + clicked: { + color: foreground(layer, "variant", "pressed"), }, }, }), state: { active: { default: { - color: foreground(layer, "on"), + color: foreground(layer, "accent"), + }, + hovered: { + color: foreground(layer, "accent", "hovered"), + }, + clicked: { + color: foreground(layer, "accent", "pressed"), }, } } @@ -87,18 +93,21 @@ export default function editor(colorScheme: ColorScheme) { color: foreground(layer, "variant"), }, state: { - clicked: { - color: foreground(layer, "base"), - }, hovered: { color: foreground(layer, "on"), }, + clicked: { + color: foreground(layer, "base"), + }, }, }), state: { active: { default: { - color: foreground(layer, "on"), + color: foreground(layer, "default"), + }, + hovered: { + color: foreground(layer, "variant"), }, } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 809cd1743f..57ee71efb4 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -67,6 +67,12 @@ export default function picker(colorScheme: ColorScheme): any { 0.5 ), }, + clicked: { + background: withOpacity( + background(layer, "pressed"), + 0.5 + ), + }, }, }), state: { @@ -76,7 +82,18 @@ export default function picker(colorScheme: ColorScheme): any { background(layer, "base", "active"), 0.5 ), - //text: text(layer, "sans", "base", "active"), + }, + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + clicked: { + background: withOpacity( + background(layer, "pressed"), + 0.5 + ), }, } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 7c37ce6bd3..2c94a51dba 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -28,33 +28,44 @@ export default function projectPanel(colorScheme: ColorScheme) { }, } + const default_entry = interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, + state: { + default: { + background: background(layer), + }, + hovered: { + background: background(layer, "variant", "hovered"), + }, + clicked: { + background: background(layer, "variant", "pressed"), + } + }, + }) + let entry = toggleable({ - base: - interactive({ + base: default_entry, + state: { + active: interactive({ base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, + ...default_entry }, state: { + default: { + background: background(colorScheme.lowest), + }, hovered: { - background: background(layer, "variant", "hovered"), + background: background(colorScheme.lowest, "hovered"), + }, + clicked: { + background: background(colorScheme.lowest, "pressed"), }, }, }), - state: { - active: { - default: { - /*background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active") ,*/ // todo posiewic - text: text(layer, "mono", "active", { size: "sm" }), - }, - hovered: { - //background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - } } } ) @@ -84,6 +95,11 @@ export default function projectPanel(colorScheme: ColorScheme) { 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), diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 0123ddee22..40816e673c 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -55,24 +55,28 @@ export default function search(colorScheme: ColorScheme) { }, }, 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"), + }, }, }), state: { active: { default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), + ...text(layer, "mono", "accent"), + }, + hovered: { + ...text(layer, "mono", "accent", "hovered"), + }, + clicked: { + ...text(layer, "mono", "accent", "pressed"), }, } } @@ -124,6 +128,9 @@ export default function search(colorScheme: ColorScheme) { hovered: { color: foreground(layer, "hovered"), }, + clicked: { + color: foreground(layer, "pressed"), + }, }, }), } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index f2c99ea736..85291c9edb 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -100,6 +100,9 @@ export default function tabBar(colorScheme: ColorScheme) { hovered: { color: foreground(layer, "hovered"), }, + clicked: { + color: foreground(layer, "pressed"), + }, }, }), state: @@ -108,6 +111,12 @@ export default function tabBar(colorScheme: ColorScheme) { default: { color: foreground(layer, "accent"), }, + hovered: { + color: foreground(layer, "hovered"), + }, + clicked: { + color: foreground(layer, "pressed"), + }, } } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index b1b28d789e..3837f5e1a4 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -19,13 +19,14 @@ export default function dropdownMenu(colorScheme: ColorScheme) { secondaryTextSpacing: 10, padding: { left: 8, right: 8, top: 2, bottom: 2 }, cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), + background: background(layer, "on") }, state: { hovered: { background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), + }, + clicked: { + background: background(layer, "pressed"), }, }, }), @@ -55,7 +56,7 @@ export default function dropdownMenu(colorScheme: ColorScheme) { background: background(layer, "active"), }, hovered: { - background: background(layer, "active"), + background: background(layer, "hovered"), }, } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index fdc7657481..d835dfe3a1 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -287,20 +287,23 @@ export default function workspace(colorScheme: ColorScheme) { state: { clicked: { background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), }, hovered: { background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), }, }, }), state: { active: { default: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), + background: background(layer, "on", "default"), }, + hovered: { + background: background(layer, "on", "hovered"), + }, + clicked: { + background: background(layer, "on", "pressed"), + } } } }