Add hover state to the filter list in Admin UI (#5642)

* Add hover state

* Add changeset

* add focus style changes

Co-authored-by: gwyneplaine <cc.lee@live.com.au>

.changeset/purple-dingos-deny.md

@@ -0,0 +1,7 @@
+---
+'@keystone-ui/core': patch
+'@keystone-ui/options': patch
+'@keystone-next/admin-ui': patch
+---
+
+Added hover state to the `OptionPrimitive` in Admin UI and updated css colors

design-system/packages/core/src/themes/default.ts

@@ -263,6 +263,7 @@ const colors = {
   background: 'white',
   backgroundMuted: palette.neutral100,
   backgroundDim: palette.neutral200,
+  backgroundHover: palette.blue50,
   border: palette.neutral300,
   borderCritical: palette.red400,
   borderFocus: palette.blue400,

design-system/packages/options/src/index.tsx

@@ -73,6 +73,7 @@ export const CheckMark = ({
 export const OptionPrimitive = <OptionType, IsMulti extends boolean>({
   children,
   isDisabled,
+  isFocused,
   innerProps,
   innerRef,
   className,
@@ -84,19 +85,28 @@ export const OptionPrimitive = <OptionType, IsMulti extends boolean>({
       className={className}
       css={{
         alignItems: 'center',
-        color: isDisabled ? theme.colors.foregroundDim : undefined,
+        color: isDisabled
+          ? theme.colors.foregroundDim
+          : isFocused
+          ? theme.colors.linkHoverColor
+          : undefined,
         cursor: 'pointer',
         display: 'flex',
         fontSize: '0.9em',
         fontWeight: 500,
         justifyContent: 'space-between',
+        background: isFocused ? theme.colors.backgroundHover : undefined,
         outline: 0,
-        padding: `${theme.spacing.small}px 0`,
+        padding: `${theme.spacing.small}px`,
         pointerEvents: isDisabled ? 'none' : undefined,
 
         '&:not(:first-of-type)': {
           borderTop: `1px solid ${theme.colors.backgroundDim}`,
         },
+        ':hover': {
+          background: theme.colors.backgroundHover,
+          color: theme.colors.linkHoverColor,
+        },
       }}
       {...innerProps}
     >

packages-next/admin-ui/src/components/Navigation.tsx

@@ -18,7 +18,7 @@ type NavItemProps = {
 };
 
 const NavItem = ({ href, children }: NavItemProps) => {
-  const { palette, spacing, radii, typography } = useTheme();
+  const { colors, palette, spacing, radii, typography } = useTheme();
   const router = useRouter();
   const isSelected =
     router.pathname === href || router.pathname.split('/')[1] === href.split('/')[1];
@@ -41,8 +41,8 @@ const NavItem = ({ href, children }: NavItemProps) => {
         textDecoration: 'none',
 
         ':hover': {
-          background: palette.blue50,
-          color: palette.blue500,
+          background: colors.backgroundHover,
+          color: colors.linkHoverColor,
         },
 
         '&[aria-current=location]': {