From f97552c39798fa09ab71a4bef3adb1e0ad3b8e3e Mon Sep 17 00:00:00 2001 From: chocoscoding Date: Mon, 18 Sep 2023 07:34:29 +0100 Subject: [PATCH 1/3] (fix):Adjust the contrast ratio for focus and hover states to meet the minimum requirement of 3.1 --- code/lib/theming/src/base.ts | 2 +- code/ui/manager/src/components/sidebar/Tree.tsx | 1 + code/ui/manager/src/components/sidebar/TreeNode.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 03157875c857..15e1c4e1b5be 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -48,7 +48,7 @@ export const background = { bar: color.lightest, content: color.lightest, gridCellSize: 10, - hoverable: transparentize(0.93, color.secondary), // hover state for items in a list + hoverable: transparentize(0.92, color.secondary), // hover state for items in a list // Notification, error, and warning backgrounds positive: '#E1FFD4', diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index dadff45d9988..3b7efe5a2e96 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -133,6 +133,7 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({ '&:hover, &:focus': { outline: 'none', background: theme.background.hoverable, + color: theme.color.lighter, }, '&[data-selected="true"]': { color: theme.color.lightest, diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index dc837accee6d..0ba7cbd35a08 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -73,6 +73,7 @@ const BranchNode = styled.button<{ background: 'transparent', '&:hover, &:focus': { background: theme.background.hoverable, + color: theme.color.lighter, outline: 'none', }, })); From 927bdd98254b42b7317bf209b004128fdfe31f5a Mon Sep 17 00:00:00 2001 From: chocoscoding Date: Tue, 19 Sep 2023 15:15:00 +0100 Subject: [PATCH 2/3] light mode error fix --- code/lib/theming/src/base.ts | 2 +- code/ui/manager/src/components/sidebar/Tree.tsx | 1 - code/ui/manager/src/components/sidebar/TreeNode.tsx | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 15e1c4e1b5be..077dbef4e124 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -48,7 +48,7 @@ export const background = { bar: color.lightest, content: color.lightest, gridCellSize: 10, - hoverable: transparentize(0.92, color.secondary), // hover state for items in a list + hoverable: transparentize(0.52, color.secondary), // hover state for items in a list // Notification, error, and warning backgrounds positive: '#E1FFD4', diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index 3b7efe5a2e96..dadff45d9988 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -133,7 +133,6 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({ '&:hover, &:focus': { outline: 'none', background: theme.background.hoverable, - color: theme.color.lighter, }, '&[data-selected="true"]': { color: theme.color.lightest, diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index 0ba7cbd35a08..dc837accee6d 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -73,7 +73,6 @@ const BranchNode = styled.button<{ background: 'transparent', '&:hover, &:focus': { background: theme.background.hoverable, - color: theme.color.lighter, outline: 'none', }, })); From 8beddfa79dcc05233d2c989ba10dd6345676f9b3 Mon Sep 17 00:00:00 2001 From: chocoscoding Date: Tue, 19 Sep 2023 15:36:34 +0100 Subject: [PATCH 3/3] hoverable color change --- code/lib/theming/src/base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 077dbef4e124..5f60c0e812df 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -48,7 +48,7 @@ export const background = { bar: color.lightest, content: color.lightest, gridCellSize: 10, - hoverable: transparentize(0.52, color.secondary), // hover state for items in a list + hoverable: transparentize(0.9, color.secondary), // hover state for items in a list // Notification, error, and warning backgrounds positive: '#E1FFD4',