tabs and radiuses

theme/components/Button.ts

@@ -63,6 +63,7 @@ const variants = {
 const Button: ComponentStyleConfig = {
   baseStyle: {
     fontWeight: 'normal',
+    borderRadius: 'base',
   },
   variants,
   sizes: {

theme/components/Table.ts

@@ -45,8 +45,8 @@ const Table: ComponentMultiStyleConfig = {
     },
     table: {
       tableLayout: 'fixed',
-      borderTopLeftRadius: 'md',
-      borderTopRightRadius: 'md',
+      borderTopLeftRadius: 'base',
+      borderTopRightRadius: 'base',
       overflow: 'hidden',
       fontVariant: 'normal',
     },

theme/components/Tabs.ts

@@ -3,21 +3,23 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type {
   PartsStyleFunction,
 } from '@chakra-ui/theme-tools';
-import { getColor } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
 const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
-  const { colorScheme: c, theme } = props;
   return {
     tab: {
-      borderRadius: '12px',
-      fontWeight: 'semibold',
-      color: 'gray.600',
+      borderRadius: 'base',
+      fontWeight: '600',
+      color: mode('blue.700', 'gray.400')(props),
       _selected: {
-        color: getColor(theme, `${ c }.700`),
-        bg: getColor(theme, `${ c }.50`),
+        color: mode('blue.700', 'gray.50')(props),
+        bg: mode('blue.50', 'gray.800')(props),
+        _hover: {
+          color: mode('blue.700', 'gray.50')(props),
+        },
       },
       _hover: {
-        color: getColor(theme, `${ c }.400`),
+        color: 'blue.400',
       },
     },
   };

theme/components/Tag.ts

@@ -10,7 +10,7 @@ const variantGray: PartsStyleFunction<typeof parts> = (props) => {
 
   return {
     container: {
-      bg: mode('gray.200', 'gray.600')(props),
+      bg: mode('blackAlpha.100', 'whiteAlpha.400')(props),
       color: mode('gray.600', 'gray.50')(props),
       ...transitionProps,
     },
@@ -27,7 +27,7 @@ const Tag: ComponentStyleConfig = {
       display: 'inline-block',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      borderRadius: 'md',
+      borderRadius: 'sm',
     },
   },
   variants,

theme/foundations/borders.ts

@@ -2,8 +2,8 @@ const borders = {
   radii: {
     none: '0',
     sm: '4px',
-    md: '8px',
-    base: '12px',
+    base: '8px',
+    md: '12px',
     lg: '24px',
     full: '9999px',
   },

ui/navigation/AccountNavLink.tsx

@@ -28,7 +28,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
         _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="md"
+        borderRadius="base"
       >
         <HStack spacing={ 3 }>
           <Icon as={ icon } boxSize="30px"/>

ui/navigation/MainNavLink.tsx

@@ -28,7 +28,7 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
         _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="md"
+        borderRadius="base"
       >
         <HStack spacing={ 3 }>
           <Icon as={ icon } boxSize="30px"/>