small fixes

theme/components/Table.ts

@@ -10,7 +10,7 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
       color: mode('gray.500', 'gray.50')(props),
     },
     thead: {
-      backgroundColor: mode('gray.50', 'whiteAlpha.100')(props),
+      backgroundColor: mode('gray.50', 'whiteAlpha.200')(props),
     },
     td: {
       borderColor: mode('gray.200', 'whiteAlpha.200')(props),

theme/components/Tag.ts

+import type { tagAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { mode } from '@chakra-ui/theme-tools';
+import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+
+const variantGray: PartsStyleFunction<typeof parts> = (props) => {
+  return {
+    container: {
+      bg: mode('gray.200', 'gray.600')(props),
+      color: mode('gray.600', 'gray.50')(props),
+    },
+  }
+}
+
+const variants = {
+  gray: variantGray,
+}
 
 const Tag: ComponentStyleConfig = {
   baseStyle: {
@@ -9,14 +25,7 @@ const Tag: ComponentStyleConfig = {
       borderRadius: 'md',
     },
   },
-  variants: {
-    gray: {
-      container: {
-        bg: 'gray.200',
-        color: 'gray.600',
-      },
-    },
-  },
+  variants,
 }
 
 export default Tag;

ui/navigation/useColors.ts

@@ -5,11 +5,11 @@ export default function useColors() {
     text: {
       'default': useColorModeValue('gray.600', 'gray.300'),
       active: useColorModeValue('blue.700', 'gray.300'),
-      hover: useColorModeValue('blue.400', 'gray.100'),
+      hover: 'blue.400',
     },
     bg: {
       'default': 'transparent',
-      active: useColorModeValue('blue.50', 'gray.900'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.200'),
     },
   }
 }