Add focus and hover colors to all themes using functional variables

Author: Pavithra Kodmad

src/ActionList/Item.tsx

@@ -7,7 +7,7 @@ import {ItemInput} from './List'
 import styled from 'styled-components'
 import {StyledHeader} from './Header'
 import {StyledDivider} from './Divider'
-import {useColorSchemeVar, useTheme} from '../ThemeProvider'
+import {useTheme} from '../ThemeProvider'
 import {
   activeDescendantActivatedDirectly,
   activeDescendantActivatedIndirectly,
@@ -17,33 +17,14 @@ import {useSSRSafeId} from '@react-aria/ssr'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import {AriaRole} from '../utils/types'
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
 const customItemThemes = {
   default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
+    hover: get('colors.neutral.subtle'),
+    focus: get('colors.neutral.muted')
   },
   danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
+    hover: get('colors.danger.subtle'),
+    focus: get('colors.danger.muted')
   }
 } as const
 
@@ -397,10 +378,9 @@ export const Item = React.forwardRef((itemProps, ref) => {
     },
     [onAction, disabled, itemProps, onClick]
   )
-
   const customItemTheme = customItemThemes[variant]
-  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit')
-  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit')
+  const hoverBackground = customItemTheme.hover
+  const focusBackground = customItemTheme.focus
 
   const {theme} = useTheme()