From d45f0bd93ed0fe5f459caa698bd7df63cfdb180a Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Wed, 26 Apr 2023 22:37:22 +0900 Subject: [PATCH 1/3] fix: use secondary-based color as background when BranchNode is hovered or focused. --- code/ui/manager/src/components/sidebar/TreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f71c7c0e9202..3a7b66bb39ee 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -75,7 +75,7 @@ const BranchNode = styled.button<{ fontSize: `${theme.typography.size.s2 - 1}px`, background: 'transparent', '&:hover, &:focus': { - background: theme.background.hoverable, + background: transparentize(0.93, theme.color.secondary), outline: 'none', }, })); From 9093fbbe040a84f9a31f9c345523867bb3a7deb0 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Wed, 26 Apr 2023 22:37:50 +0900 Subject: [PATCH 2/3] fix: use secondary-based color as background when LeafNode is hovered or focused. --- code/ui/manager/src/components/sidebar/TreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index 3a7b66bb39ee..6814a3e7bb59 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -92,7 +92,7 @@ const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({ background: 'transparent', '&:hover, &:focus': { outline: 'none', - background: theme.background.hoverable, + background: transparentize(0.93, theme.color.secondary), }, '&[data-selected="true"]': { color: theme.color.lightest, From 7f98bffe170be95a3a4cd86bf6bc5f18b2459d1e Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Sun, 17 Sep 2023 00:21:25 +0900 Subject: [PATCH 3/3] fix: #22199 modify LeafNodeStyleWrapper hover and focus background --- code/ui/manager/src/components/sidebar/Tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index dadff45d9988..e329310e6b88 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -132,7 +132,7 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({ background: 'transparent', '&:hover, &:focus': { outline: 'none', - background: theme.background.hoverable, + background: transparentize(0.93, theme.color.secondary), }, '&[data-selected="true"]': { color: theme.color.lightest,