update button styles and screenshots

theme/components/Button/Button.ts

@@ -47,7 +47,7 @@ const variantOutline = defineStyle((props) => {
 
   const isGrayTheme = c === 'gray' || c === 'gray-dark';
   const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const borderColor = isGrayTheme ? mode('gray.300', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
   const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const activeColor = (() => {
     if (c === 'gray') {

theme/components/Select.ts

@@ -2,6 +2,7 @@ import { selectAnatomy as parts } from '@chakra-ui/anatomy';
 import {
   createMultiStyleConfigHelpers,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 import Input from './Input';
 
@@ -12,10 +13,15 @@ const variantOutline = definePartsStyle((props) => {
   return {
     field: {
       ...Input.variants?.outline(props).field,
+      borderColor: mode('gray.200', 'gray.600')(props),
+      _hover: {
+        borderColor: mode('gray.300', 'gray.500')(props),
+      },
       _focusVisible: {
-        borderColor: Input.variants?.outline(props).field.borderColor,
+        borderColor: mode('gray.200', 'gray.600')(props),
         boxShadow: 'none',
       },
+      cursor: 'pointer',
     },
   };
 });